CODEWITHSUNDEEP
jquery-pluginsfancybox
Luis Santos
Luis Santos

Reputation: 1

Problems using jQuery quicksand with fancybox, revisited

I don´t know if it is correct what I'm doing, but if not let me know. I have a question about this previous post: Problems using jQuery quicksand with fancybox

The fancybox is working perfect but i have a problem. When I use the script:

$("a.grouped_elements").fancybox({
'titlePosition'     : 'inside',
'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
     return '<span id="fancybox-title-inside">Image ' + (currentIndex + 1) + ' / ' +
              currentArray.length + (title.length ? ' &nbsp; ' + title : '') + 
             '</span>';
}

It the sandbox plugin, which is cloning the elements in order to arrange them easily, it clones the first set 5 times and the rest 3 times so my first gallery has 7 images by 5 sandbox clones = 35 images in the gallery second gallery has 4 by 3 clones = 12 images in the gallery and so on and so forth.

How can I resolve this issue?

Here´s a link to the website: http://www.lslx-web.com/teste/index.html

Once again, people like you arttronics are very good people. It´s working.

Upvotes: 0

Views: 616

Answers (1)

arttronics
arttronics

Reputation: 9955

The Making a Beautiful HTML5 Portfolio tutorial site isn't letting post a solution for you, but I see this is a good place as others have this problem.

First, your Head Section of your webpage should look like THIS to correct basic mistakes.

Second, your Body Section has a lot of li tags without closing them.

Third, here is the solution to having Fancybox and other jQuery lightbox clone scripts to be used in Gallery Mode that do not cache links:

// This jQuery shown is part of your customized .js file for use with quicksand.js
$('#stage').quicksand(link.data('list').find('li'), function() {

   //
   //  Place your usual jQuery or Javascript GALLERY markup here with CLONING issue (not for cached gallery links).
   //

   // This next jQuery line should be placed prior to the closing of your function.
   // All hidden items Quicksand has set on the webpage will be removed which in turns removes the CLONED jQuery elements.
   // When the Quicksand Menu Filter Button is used again, your filtered items will remain correct in gallery length.
   $('section#container').find('ul.hidden').remove();

});

Upvotes: 1

Related Questions