CODEWITHSUNDEEP
jqueryimagegallery
Robo Cop
Robo Cop

Reputation: 3

more than one image gallery on one page

I've created a small image gallery with thumbnails. Every time I hover over a given color, the image in the main window changes to an image having this color (in reality, I'll want the color-images to be replaced with different color variations of the image I put there).

What I'd like to do is to put more than one such gallery on my page. The problem is that if I add another gallery, everything is duplicated. I would like to avoid creating the css and jquery code for every single gallery. Is there any way of making this happen?

Also, originally I wanted the big images to appear only when the color-thumbnail is clicked on, not hovered over but when I use click() instead of the mouseover(), the image "flickers" and disappears. What am I doing wrong?

Below is my code:

CSS

.g-wrap {
    width: 250px;
    margin: 0;
    padding: 0;
}
.g-image {
    width: 250px;
    height: 159px;
    position: relative;
}
.g-image img {
    display: none;
    position: absolute;
    width: 250px;
    height: 159px;
    border: none;
}
.g-colors {
    margin: 0 auto;
}
.g-colors a {
    display: block;
    width: 24px;
    height: 24px;
    float: left;
}
.clearfix {
    float: none;
    clear: both;
}
/*Color palette*/
.purple {background-color: #7d278a;}
.beige {background-color: #b8b596;}
.gray {background-color: #5a5b5d;}
.blue {background-color: #5388d4;}

HTML

<div class="g-wrap">
<div class="g-image">
<a href=""><img src="http://imageshack.us/a/img89/4650/purplew.jpg" /></a>
<a href=""><img src="http://imageshack.us/a/img18/6574/beigekq.jpg" /></a>
<a href=""><img src="http://imageshack.us/a/img526/2198/grayw.jpg" /></a>
<a href=""><img src="http://imageshack.us/a/img849/6161/blueye.jpg" /></a>
</div>
<div class="g-colors">
<a href="" title="purple" class="purple"></a>
<a href="" title="beige" class="beige"></a>
<a href="" title="gray" class="gray"></a>
<a href="" title="blue" class="blue"></a>
</div>
<div class="clearfix"></div>
</div>

jQuery

$(document).ready(function(){
    var totalWidth = 0;
    $(".g-colors").children().each(function() {
    totalWidth = totalWidth + $(this).width();
    $(".g-colors").css('width',totalWidth);
});
    });
$(document).ready(function(){
    $(".g-image img").eq(0).css('display','block')
    $(".g-colors a").each(function(){
        $(this).mouseover(function(){
        var x = $(this).index();
        $(this).closest(".g-image img").hide();
        $(this).closest(".g-image img").eq(x).show();
        });
        });
    });

Upvotes: 0

Views: 178

Answers (1)

egnarts-ms
egnarts-ms

Reputation: 146

First, I think you've got an error in your JS code. Try to add the following output to console:

console.log($(this).closest(".g-image img").length);

$(this).closest(".g-image img").hide();
$(this).closest(".g-image img").eq(x).show();

For me, it prints 0. That means that the jQuery set of elements is empty. Indeed, I think you need to write something like this (according to your HTML structure):

var imgs = $(this).closest('.g-wrap').find('.g-image img');
imgs.hide();
imgs.eq(x).show();

Second, to avoid having to duplicate the whole code you just need to write some smarter code :) For instance, wrap what you've placed in $(document).ready(...); in a separate function. That function should accept a DOM element and make some operations on it to endorse it with the gallery capabilities, i.e., the function should attach some event handlers to the respective ".g-colors a" elements (in exactly the same way you already do in your sample). Then you can apply your function to each gallery DOM element and that's it. Something like this:

function makeGallery(gal)
{
   var totalWidth = 0;
   $(".g-colors > a", gal).each(function() {
      totalWidth = totalWidth + $(this).width();
      $(".g-colors").css('width', totalWidth);
   });


   $(".g-image img", gal).eq(0).css('display','block');

   $(gal).on('mouseover', '.g-colors > a', function() {
      var x = $(this).index();

      var imgs = $('.g-image img', gal);
      imgs.hide();
      imgs.eq(x).show();
   });
}

$(function () {
   makeGallery($('.g-wrap')[0]);
});

Upvotes: 0

Related Questions