Double up of images in gallery

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Double up of images in gallery

Toledoh
Hi All,

Can someone please help.  I can't seem to figure out why my galleries are loading up with double the number of images...

www.bluebaydesign.com.au

You will find examples in the portfolio section...

Really appreciate it!

Cheers,
Tim
Reply | Threaded
Open this post in threaded view
|

Re: Double up of images in gallery

Wizzud
Your easySlider jquery plugin is cloning your links (ie. duplicating) in order to get the slide effect!
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Double up of images in gallery

Toledoh
Thanks Wizzud. Any thoughts on what I could do to fix it?
Reply | Threaded
Open this post in threaded view
|

Re: Double up of images in gallery

Toledoh
In reply to this post by Wizzud
I've found that by using a script triggered gallery, the cloning issue seems to be solved.  Would you feel that this is an appropriate way of going?

This can be seen at http://www.bluebaydesign.com.au/  navigate to "brands", then select the top-left thumnail.

The script can be viewed at http://www.bluebaydesign.com.au/js/demo.js

Can you suggest any way to clean this up?  I've not had much experience here.


Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: Double up of images in gallery

Wizzud
Aside from easySlider's cloning problems, you have div#slider and div#slider2, both containing galleried shadowbox links, but both these divs have rels with shadowbox[2], shadowbox[3], etc, etc, which means that clicking a shadowbox[2] link in div#slider will bring up a gallery that includes all the shadowbox[2] images from both div#slider and div#slider2.
If div#slider and div#slider2 contain images distinct from each other, the gallery names used in each should be unique.

However, there is a way around this, by using jQuery, and delaying Shadowbox.setup(), such that you don't need to worry about the gallery naming between div#slider and div#slider2, and you don't need your demo.js either (don't forget to remove the onclick from the first brand image!)...

Change your Shadowbox init() to...
Shadowbox.init({
    language: 'en'
  , players:  ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv', 'gdoc']
  , skipSetup: true // delay running setup until you are ready
});

Within your DOM Ready call that sets up the easySliders, and after those 3 calls, insert this block of code (including the Shadowbox.setup call)...
$.each(['slider', 'slider2'], function(i, n){
    $('#' + n + ' li').each(function(j){
        $('a:rel[^=shadowbox]', this).each(function(){
            var rel = $(this).attr('rel')
              , m = rel.split('[');
            if(m.length > 1){
              $(this).attr('rel', m.join('[' + n + '_' + j + '_')); 
            }
          });
      });
  });
Shadowbox.setup();
What this does is prepend the gallery-name part of the rel attribute with the containing slider DIV's id and the index of the containing LI (so that easySlider's cloning is catered for). It then runs Shadowbox.setup() to set up all the images.
Combine literacy with curiosity and a whole world of information opens up to you