Gallary Mausklick

Rantanplan

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>

Alles anzeigen

synaptic

etwas mehr code oder ein link wären hilfreich... sonst isses lediglich spekulation und glaskugelrubbelei

Rantanplan

Hallo, hier der Demo-Link:

http://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

<!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>

Alles anzeigen

+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 - - -

http://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

<!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>

Alles anzeigen

- - - 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?

synaptic

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

Tags