Thread: Photo gallery

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    2
    Rep Power
    0

    Photo gallery


    hi guys,
    I just started learning javascript and jquery so forgive me if this seems like a stupid question. However, I need some help doing a jquery photogallery. I so far have to event a mouseenter and a mouseleave, but when I hover over my thumbnails the picture blown up version of the picture should show up in a different div. Yet, I have know Idea how I can use an array to place pictures in the other div? like, I created an array with the src to all the big pictures, but I dont know how I would get it to recognize the index of the array and match it up with the thumbnail to display the appropriate one? any help would be really appreciated. Thanks in advance.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    184
    Rep Power
    31
    It would be nice to see some of your code, dave25111.
    Welcome to the forum...

    So provided that you've placed HTML thumb images in the same order as the array:
    Code:
    <div class="thumbs">
      <img src="thumb_hello.jpg" alt="thumb_hello"/>
      <img src="thumb_other.jpg" alt="thumb_other"/>
      <img src="thumb_world.jpg" alt="thumb_world"/>
      <!-- and so on -->
    </div>
    
    <img class="big" src="" alt=""/>
    Code:
    var bigs = [
      'big_hello.jpg',
      'big_other.jpg',
      'big_world.jpg'
      //and so on 
    ];
    then there might be a simple way:
    PHP Code:
        $('.thumbs > img').each(function(idx){
            $(
    this)
                .
    mouseenter(function(){
                    $(
    '.big').attr('src'bigs[idx]);
                })
                .
    mouseleave(function(){
                    
    //do something else
                
    });
        }); 
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    2
    Rep Power
    0

    here's some code


    hi,
    thanks for the quick reply on the issue. I need to have this done asap for school so your help is really appreciated. So far I just hand coded what I want it to do it works, but I know there is a better more maintainable way of doing it. So here is what I got so far...

    //note I just put in some dummy urls for the window.open()
    //This is my array I want to munipulate.
    var gallery = ["images/guitarman.jpg", "images/IMG_8446.JPG", "images/IMG_8442.JPG", "images/IMG_8441.JPG", "images/IMG_8440.JPG",
    "images/IMG_8439.JPG", "images/IMG_8437.JPG", "images/IMG_8436.JPG", "images/IMG_8434.JPG", "images/IMG_8432.JPG", "images/IMG_8432.JPG",
    "images/IMG_8428.JPG", "images/IMG_8427.JPG", "images/IMG_8426.JPG", "images/IMG_8425.JPG", "images/IMG_8422.JPG"];

    //this is the for loop I intended to use for preloading the images to the cache.
    $(document).ready(function(){
    for(var currentPic = 0; currentPic < gallery.length; currentPic++){
    }
    });

    //now this is where the code get completely ridiculous. I just hand coded the whole thing. So if there is a better way of doing this that would be maintainable even with a lot of pictures please do enlighten me on that.
    $(document).ready(function(){
    $("#1").mouseenter(function(){
    $("#sidebar").html("<img src='images/guitarman.jpg' alt='image' />");
    }).click(function(){ window.open("images/guitarman.jpg");
    });
    $("#2").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8446.JPG' alt='image' />");
    }).click(function(){ window.open("images/IMG_8446.JPG");
    });
    $("#3").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8442.JPG' alt='image' />");
    }).click(function(){ window.open("images/IMG_8442.JPG");
    });
    $("#4").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8441.JPG' alt='image' />");
    }).click(function(){
    window.open("/images/IMG_8441.JPG");
    });
    $("#5").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8440.JPG' alt='image' />");
    }).click(function(){ window.open("http://images/IMG_8440JPG");
    });
    $("#6").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8439.JPG' alt='image' />");
    }).click(function(){ window.open("http://images/IMG_8439.JPG");
    });
    $("#7").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8437.JPG' alt='image' />");
    }).click(function(){
    window.open("http://images/IMG_8437.JPG");
    });
    $("#8").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8436.JPG' alt='image' />");
    }).click(function(){
    window.open("http://images/IMG_8436.JPG");
    });
    $("#9").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8434.JPG' alt='image' />");
    }).click(function(){
    window.open("http://images/IMG_8434.JPG");
    });
    $("#10").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8432.JPG' alt='image' />");
    }).click(function(){ window.open("http://images/IMG_8432.JPG");
    });
    $("#11").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8432.JPG' alt='image' />");
    }).click(function(){
    window.open("http://images/IMG_8432.JPG");
    });
    $("#12").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8428.JPG' alt='image' />");
    }).click(function(){
    window.open("http://images/IMG_8428.JPG");
    });
    $("#13").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8427.JPG' alt='image' />");
    }).click(function(){
    window.open("http://images/IMG_8427.JPG");
    });
    $("#14").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8426.JPG' alt='image' />");
    }).click(function(){
    window.open("http://images/IMG_8426.JPG");
    });
    $("#15").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8425.JPG' alt='image' />");
    }).click(function(){
    window.open("http://IMG_8425.JPG");
    });
    $("#16").mouseenter(function(){
    $("#sidebar").html("<img src='images/IMG_8422.JPG' alt='image' />");
    }).click(function(){
    window.open("http://IMG_8422.JPG");
    });

    //I just sent mouseleave to null so I wouldn't have a picture displayed in my other div.
    $(".images").mouseleave(function(){
    $("#sidebar").html(null);
    });
    });

IMN logo majestic logo threadwatch logo seochat tools logo