Ergebnis 1 bis 4 von 4

Thema: Gallary Mausklick

  1. #1
    HTML Newbie
    Registriert seit
    29.08.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Gallary Mausklick

    Wie kann ich diese Gallery öfters auf einer Seite benutzen? Wenn ich die einfach Kopiere und die Bilder bzw auch die ID ändere, laden die alle in das selbe mainImage

    Code:
              <style type="text/css">
    
            .imgStyle
            {
                width:141px;
                height:65px;
                border:1px solid white;
            }
            </style>
            <img id="mainImage" style="border:1px solid white"
            src="Bilder/Slider/1.jpg" height="240px" width="435px"/>
            <div id="divId" onclick="changeImageOnClick(event)">
            <BR><img class="imgStyle" src="Bilder/Slider/1.jpg">
            <img class="imgStyle" src="Bilder/Slider/2.jpg">
            <img class="imgStyle" src="Bilder/Slider/3.jpg">
            </div>
    
    
        <script type="text/javascript">
            var images = document.getElementById("divId")
            .getElementsByTagName("img");
            for (var i = 0; i < images.length; i++)
            {
            images[i].onmouseover = function ()
            {
            this.style.cursor = 'hand';
            this.style.borderColor = 'red';
            }
            images[i].onmouseout = function ()
            {
            this.style.cursor = 'pointer';
            this.style.borderColor = 'white';
            }
            }
    
            function changeImageOnClick(event)
            {
            event = event || window.event;
            var targetElement = event.target || event.srcElement;
            if (targetElement.tagName == "IMG")
            {
            mainImage.src = targetElement.getAttribute("src");
            }
            }
        </script>
    
        </div>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Rantanplan (05.09.2015 um 03:18 Uhr)

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Gallary Mausklick

    etwas mehr code oder ein link wären hilfreich... sonst isses lediglich spekulation und glaskugelrubbelei
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    29.08.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Gallary Mausklick

    Hallo, hier der Demo-Link:

    demo.comuf.com/Demo3.html
    (komischerweise geht der link bzw bilder nur, wenn man es ohne www. eingibt, aber ist ja nur demo auf nem kostenlosen server, muss mir erst noch webspace kaufen)

    nunja, hier der code dazu:

    HTML-Code:
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    
    <head>
        <title>Titel</title>
    
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="keywords" content="" />
        <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
    
        <link href="style.css" type="text/css" rel="stylesheet" />
    </head>
    
    <body>
    
           <div id="1">
         <style type="text/css">
            .imgStyle
            {
                width:141px;
                height:65px;
                border:1px solid white;
            }
            </style>
            <img id="mainImage" style="border:1px solid white"
            src="Bilder/Gallerie/00_1.jpg" height="240px" width="435px"/>
            <div id="divId" onclick="changeImageOnClick(event)">
            <BR><img class="imgStyle" src="Bilder/Gallerie/00_1.jpg">
            <img class="imgStyle" src="Bilder/Gallerie/00_2.jpg">
            <img class="imgStyle" src="Bilder/Gallerie/00_3.jpg">
    
    
       <script type="text/javascript">
            var images = document.getElementById("divId")
            .getElementsByTagName("img");
            for (var i = 0; i < images.length; i++)
            {
            images[i].onmouseover = function ()
            {
            this.style.cursor = 'hand';
            this.style.borderColor = 'red';
            }
            images[i].onmouseout = function ()
            {
            this.style.cursor = 'pointer';
            this.style.borderColor = 'white';
            }
            }
    
            function changeImageOnClick(event)
            {
            event = event || window.event;
            var targetElement = event.target || event.srcElement;
            if (targetElement.tagName == "IMG")
            {
            mainImage.src = targetElement.getAttribute("src");
            }
            }
        </script>
             </div>
           </div>
    
    
    
    
    
      </body>
    </html>
    +diese gallerie kann ich aber nur einmal pro seite benutzen, möchte sie aber paar mal einsetzen. wenn ich das aber mache, laden alle thumpnails in ein und das selbe mainimage

    - - - Aktualisiert - - -

    demo.comuf.com/Demo4.html
    diese könnte ich öfters pro seite benutzen, aber es ändert die bilder mit mausover, es soll aber erst mit mausklick links ändern:

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    
    <head>
        <title>Titel</title>
    
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="keywords" content="" />
        <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
    
    
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
    
    
        <style type="text/css">
        .gallery {width: 435px; margin: 0px;}
        .gallery ul {width:435px; padding-left: 0px;}
        .gallery li {display: inline; margin-right:0px;}
        </style>
    
    </head>
    
    <body>
    
    
        <script type="text/JavaScript">
    $(document).ready(function() {
        var galleryClass = '.gallery';
        $(galleryClass+' li img').hover(function(){
            var $gallery = $(this).parents(galleryClass);
            $('.main-img',$gallery).attr('src',$(this).attr('src').replace('thumb/', ''));
        });
        var imgSwap = [];
         $(galleryClass+' li img').each(function(){
            imgUrl = this.src.replace('thumb/', '');
            imgSwap.push(imgUrl);
        });
        $(imgSwap).preload();
    });
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }
    </script>
    </head>
    <body>
    <div class="wrap">
    
        <div class="gallery">
        <img width="435" height="200" src="Bilder/Gallerie/00_1.jpg" alt="" class="main-img" />
    
        <ul>
          <li><img width="142" height="65" src="Bilder/Gallerie/00_1.jpg" alt="" /></li>
          <li><img width="142" height="65" src="Bilder/Gallerie/00_2.jpg" alt="" /></li>
          <li><img width="142" height="65" src="Bilder/Gallerie/00_3.jpg" alt="" /></li>
        </ul>
    
    </div>
    
    
    
    
    
    
    </body>
    </html>
    - - - Aktualisiert - - -

    p.s. habe jetzt einfach den hover zu klick geändert und es geht. also problem gelöst. so einfach kanns sein. aber, rein für lernzwecke, wieso geht denn die eine gallerie nur einmal pro seite, selbst wenn ich die mainImage ID ändere?

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Gallary Mausklick

    weil das script dafür "kacke" is.. du musst an einigen stellen die ID und co anpassen und wenn du das machst, müsstest du auch nochmal das script angepasst hernehmen. deswegen programmiert man modular, so dass man am ende des tages nur noch das main-image und das umschliessende div der vorschau hat und lässt dann das modul den rest erledigen
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Bildwechsel per Mausklick
    Von Darkking im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 18.06.2014, 16:26
  2. Drucken per Mausklick
    Von yngvar im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 04.12.2008, 22:00
  3. CSS: Focusieren per Mausklick
    Von redhead9 im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 13.07.2008, 19:57
  4. PopUp per mausklick
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.09.2006, 18:11
  5. bild vergörßerung per per mausklick
    Von FR0SCH im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 23.05.2005, 20:04

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •