Pià di una gallery jquery nella stessa pagina

[elnigno82]

Salve,
ho una pagina php con una galleria jquery ordinata on demand in base ai tag di alcune classi delle immagini.
Tale pagina fa uso di molte libreirie jQuery e Css ed è pagina unica ( cioè fa uso di ancore per i link, ma in pratica non ne esistono altre, tutto gira su index.php).

Tutto funziona se mi limito ad inserire una sola istanza gallery.

Se ne inserisco già solo due, la prima funziona mentre la seconda no.

sulla index.php abbiamo:

<!--Gallery Start-->
<li id="page_gallery">
    <div class="title-wrapper">
        <h2>Gallery</h2>
    </div>
    <div>
    <ul class="splitter" id="filter">
        <li>
        <ul>
            <li class="segment-1 selected-1"><a href="#" data-value="all">All</a></li>
            <li class="segment-0"><a href="#" data-value="non_veg">Non Veg</a></li>
            <li class="segment-2"><a href="#" data-value="veg">Veg</a></li>
            <li class="segment-3"><a href="#" data-value="drinks">Drinks</a></li>
        </ul>
        </li>
    </ul>
    </div>
    <div class="image_grid">
        <ul id="list" class="portfolio_list">
            <li data-id="id-1" class="non_veg">
                <a href="images/gallery_big_img_1.jpg" title="Image Description Goes Here" class="example6">
                    <span class="roll"></span>
                    <img src="images/gallery_img_1.jpg" alt="img" class="img_bor" />
                </a>
            </li>
            <li data-id="id-2" class="non_veg">
                <a href="images/gallery_big_img_2.jpg" title="Image Description Goes Here" class="example6">
                    <span class="roll"></span>
                    <img src="images/gallery_img_2.jpg" alt="img" class="img_bor" />
                </a>
            </li>
            <li data-id="id-3" class="non_veg">
                <a href="images/gallery_big_img_3.jpg" title="Image Description Goes Here" class="example6">
                    <span class="roll"></span>
                    <img src="images/gallery_img_3.jpg" alt="img" class="img_bor" />
                </a>
            </li>
         
        </ul>
    </div>    
</li>
<!--Gallery End--> 

ebbene se prova a duplicare questo codice più sotto, creando quindi due copie, funziona solo il primo ho provato a cambiare il data-id, cambiare i class="segment..." ecc ecc, ma la seconda istanza non ne vuole sapere...non so come fare

[Nobody33]

Una gallery jQuery dipende da quest'ultimo, quindi è necessario vedere anche quello.

[elnigno82]

hai ragione allora aspetta:

portfolio_sortable.js:

    
(function($) {
         
    $.fn.sorted = function(customOptions) {
        var options = {
            reversed: false,
            by: function(a) {
                return a.text();
            }
        };
        $.extend(options, customOptions);
    
        $data = $(this);
        arr = $data.get();
        arr.sort(function(a, b) {
            
               var valA = options.by($(a));
               var valB = options.by($(b));
            if (options.reversed) {
                return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;                
            } else {        
                return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;    
            }
        });
        return $(arr);
    };

})(jQuery);

jQuery(function() {

  var read_button = function(class_names) {
    var r = {
      selected: false,
      type: 0
    };
    for (var i=0; i < class_names.length; i++) {
      if (class_names[i].indexOf('selected-') == 0) {
        r.selected = true;
      }
      if (class_names[i].indexOf('segment-') == 0) {
        r.segment = class_names[i].split('-')[1];
      }
    };
    return r;
  };
  
  var determine_sort = function($buttons) {
    var $selected = $buttons.parent().filter('[class*="selected-"]');
    return $selected.find('a').attr('data-value');
  };
  
  var determine_kind = function($buttons) {
    var $selected = $buttons.parent().filter('[class*="selected-"]');
    return $selected.find('a').attr('data-value');
  };
  
  var $preferences = {
    duration:500,
    easing: 'easeInOutQuad',
    adjustHeight: 'dynamic'
  };
  
  var $list = jQuery('#list');
  //var $list = jQuery('.list');
  var $data = $list.clone();
  
  var $controls = jQuery('ul.splitter ul');
  
  $controls.each(function(i) {
    
    var $control = jQuery(this);
    var $buttons = $control.find('a');
    
    $buttons.bind('click', function(e) {
      
      var $button = jQuery(this);
      var $button_container = $button.parent();
      var button_properties = read_button($button_container.attr('class').split(' '));      
      var selected = button_properties.selected;
      var button_segment = button_properties.segment;

      if (!selected) {
        for(var i=0; i<12; i++)
        {
        $buttons.parent().removeClass('selected-'+ i)
            }
        $button_container.addClass('selected-' + button_segment);
        
        var sorting_type = determine_sort($controls.eq(1).find('a'));
        var sorting_kind = determine_kind($controls.eq(0).find('a'));
        
        if (sorting_kind == 'all') {
          var $filtered_data = $data.find('li');
        } else {
          var $filtered_data = $data.find('li.' + sorting_kind);
        }
        
        if (sorting_type == 'size') {
          var $sorted_data = $filtered_data.sorted({
            by: function(v) {
              return parseFloat($(v).find('span').text());
            }
          });
        } else {
          var $sorted_data = $filtered_data.sorted({
            by: function(v) {
              return jQuery(v).find('strong').text().toLowerCase();
            }
          });
        }
        
        $list.quicksand($sorted_data, $preferences, function () {
        portfoliohover();
    
        $("a.example6").fancybox({
                'titlePosition'    : 'inside'
            });
            
            });
        
      }
      
      e.preventDefault();
    });
    
  }); 

  
}); 

[elnigno82]

quicksand.js:
[PHP](function ($) {
$.fn.quicksand = function (collection, customOptions) {
var options = {
duration: 800,
easing: 'swing',
attribute: 'data-id', // attribute to recognize same items within source and dest
adjustHeight: 'auto', // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it before or after the animation, false leaves height constant
useScaling: true, // disable it if you're not using scaling effect or want to improve performance
enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
selector: '> *',
dx: 0,
dy: 0
};
$.extend(options, customOptions);

if ($.browser.msie || (typeof($.fn.scale) == 'undefined')) {
// Got IE and want scaling effect? Kiss my ass.
options.useScaling = false;
}

var callbackFunction;
if (typeof(arguments[1]) == 'function') {
var callbackFunction = arguments[1];
} else if (typeof(arguments[2] == 'function')) {
var callbackFunction = arguments[2];
}

return this.each(function (i) {
var val;
var animationQueue = []; // used to store all the animation params before starting the animation; solves initial animation slowdowns
var $collection = $(collection).clone(); // destination (target) collection
var $sourceParent = $(this); // source, the visible container of source collection
var sourceHeight = $(this).css('height'); // used to keep height and document flow during the animation

var destHeight;
var adjustHeightOnCallback = false;

var offset = $($sourceParent).offset(); // offset of visible container, used in animation calculations
var offsets = []; // coordinates of every source collection item

var $source = $(this).find(options.selector); // source collection items

// Replace the collection and quit if IE6
if ($.browser.msie && $.browser.version.substr(0,1)<7) {
$sourceParent.html('').append($collection);
return;
}

// Gets called when any animation is finished
var postCallbackPerformed = 0; // prevents the function from being called more than one time
var postCallback = function () {

if (!postCallbackPerformed) {
postCallbackPerformed = 1;

// hack:
// used to be: $sourceParent.html($dest.html()); // put target HTML into visible source container
// but new webkit builds cause flickering when replacing the collections
$toDelete = $sourceParent.find('> *');
$sourceParent.prepend($dest.find('> *'));
$toDelete.remove();

if (adjustHeightOnCallback) {
$sourceParent.css('height', destHeight);
}
options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection
if (typeof callbackFunction == 'function') {
callbackFunction.call(this);
}
}
};

// Position: relative situations
var $correctionParent = $sourceParent.offsetParent();
var correctionOffset = $correctionParent.offset();
if ($correctionParent.css('position') == 'relative') {
if ($correctionParent.get(0).nodeName.toLowerCase() == 'body') {

} else {
correctionOffset.top += (parseFloat($correctionParent.css('border-top-width')) || 0);
correctionOffset.left +=( parseFloat($correctionParent.css('border-left-width')) || 0);
}
} else {
correctionOffset.top -= (parseFloat($correctionParent.css('border-top-width')) || 0);
correctionOffset.left -= (parseFloat($correctionParent.css('border-left-width')) || 0);
correctionOffset.top -= (parseFloat($correctionParent.css('margin-top')) || 0);
correctionOffset.left -= (parseFloat($correctionParent.css('margin-left')) || 0);
}

// perform custom corrections from options (use when Quicksand fails to detect proper correction)
if (isNaN(correctionOffset.left)) {
correctionOffset.left = 0;
}
if (isNaN(correctionOffset.top)) {
correctionOffset.top = 0;
}

correctionOffset.left -= options.dx;
correctionOffset.top -= options.dy;

// keeps nodes after source container, holding their position
$sourceParent.css('height', $(this).height());

// get positions of source collections
$source.each(function (i) {
offsets[i] = $(this).offset();
});

// stops previous animations on source container
$(this).stop();
var dx = 0; var dy = 0;
$source.each(function (i) {
$(this).stop(); // stop animation of collection items
var rawObj = $(this).get(0);
if (rawObj.style.position == 'absolute') {
dx = -options.dx;
dy = -options.dy;
} else {
dx = options.dx;
dy = options.dy;
}

rawObj.style.position = 'absolute';
rawObj.style.margin = '0';

rawObj.style.top = (offsets[i].top - parseFloat(rawObj.style.marginTop) - correctionOffset.top + dy) + 'px';
rawObj.style.left = (offsets[i].left - parseFloat(rawObj.style.marginLeft) - correctionOffset.left + dx) + 'px';
});

// create temporary container with destination collection
var $dest = $($sourceParent).clone();
var rawDest = $dest.get(0);
rawDest.innerHTML = '';
rawDest.setAttribute('id', '');
rawDest.style.height = 'auto';
rawDest.style.width = $sourceParent.width() + 'px';
$dest.append($collection);
// insert node into HTML
// Note that the node is under visible source container in the exactly same position
// The browser render all the items without showing them (opacity: 0.0)
// No offset calculations are needed, the browser just extracts position from underlayered destination items
// and sets animation to destination positions.
$dest.insertBefore($sourceParent);
$dest.css('opacity', 0.0);
rawDest.style.zIndex = -1;

rawDest.style.margin = '0';
rawDest.style.position = 'absolute';
rawDest.style.top = offset.top - correctionOffset.top + 'px';
rawDest.style.left = offset.left - correctionOffset.left + 'px';


if (options.adjustHeight === 'dynamic') {
// If destination container has different height than source container
// the height can be animated, adjusting it to destination height
$sourceParent.animate({height: $dest.height()}, options.duration, options.easing);
} else if (options.adjustHeight === 'auto') {
destHeight = $dest.height();
if (parseFloat(sourceHeight) < parseFloat(destHeight)) {
// Adjust the height now so that the items don't move out of the container
$sourceParent.css('height', destHeight);
} else {
// Adjust later, on callback
adjustHeightOnCallback = true;
}
}

// Now it's time to do shuffling animation
// First of all, we need to identify same elements within source and destination collections
$source.each(function (i) {
var destElement = [];
if (typeof(options.attribute) == 'function') {

val = options.attribute($(this));
$collection.each(function() {
if (options.attribute(this) == val) {
destElement = $(this);
return false;
}
});
} else {
destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
}
if (destElement.length) {
// The item is both in source and destination collections
// It it's under different position, let's move it
if (!options.useScaling) {
animationQueue.push(
{
element: $(this),
animation:
{top: destElement.offset().top - correctionOffset.top,
left: destElement.offset().left - correctionOffset.left,
opacity: 1.0
}
});

} else {
animationQueue.push({
element: $(this),
animation: {top: destElement.offset().top - correctionOffset.top,
left: destElement.offset().left - correctionOffset.left,
opacity: 1.0,
scale: '1.0'
}
});

}
} else {
// The item from source collection is not present in destination collections
// Let's remove it
if (!options.useScaling) {
animationQueue.push({element: $(this),
animation: {opacity: '0.0'}});
} else {
animationQueue.push({element: $(this), animation: {opacity: '0.0',
scale: '0.0'}});
}
}
});

$collection.each(function (i) {
// Grab all items from target collection not present in visible source collection

var sourceElement = [];
var destElement = [];
if (typeof(options.attribute) == 'function') {
val = options.attribute($(this));
$source.each(function() {
if (options.attribute(this) == val) {
sourceElement = $(this);
return false;
}
});

$collection.each(function() {
if (options.attribute(this) == val) {
destElement = $(this);
return false;
}
});
} else {
sourceElement = $source.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
destElement = $collection.filter('[' + options.attribute + '=' + $(this).attr(options.attribute) + ']');
}

[elnigno82]

var animationOptions;
if (sourceElement.length === 0) {
// No such element in source collection...
if (!options.useScaling) {
animationOptions = {
opacity: '1.0'
};
} else {
animationOptions = {
opacity: '1.0',
scale: '1.0'
};
}
// Let's create it
d = destElement.clone();
var rawDestElement = d.get(0);
rawDestElement.style.position = 'absolute';
rawDestElement.style.margin = '0';
rawDestElement.style.top = destElement.offset().top - correctionOffset.top + 'px';
rawDestElement.style.left = destElement.offset().left - correctionOffset.left + 'px';
d.css('opacity', 0.0); // IE
if (options.useScaling) {
d.css('transform', 'scale(0.0)');
}
d.appendTo($sourceParent);

animationQueue.push({element: $(d),
animation: animationOptions});
}
});

$dest.remove();
options.enhancement($sourceParent); // Perform custom visual enhancements during the animation
for (i = 0; i < animationQueue.length; i++) {
animationQueue[i].element.animate(animationQueue[i].animation, options.duration, options.easing, postCallback);
}
});
};
})(jQuery);[/PHP]

[cavicchiandrea]

Se duplichi anche gli ID tipo questo <li id="page_gallery"> è normale che funzioni solo il primo blocco perché gli ID devono essere univoci, se puoi tramutare gli ID in classi dovresti risolvere altrimenti boh..... Potrebbe essere complesso modificare lo script

[elnigno82]

no no beh quella era la prima cosa che avevo cambiato, anche perchè altrimenti non funzionava l'ancora sulla index.poi avevo provato anche a cambiare i data-id inserendo info dettagliate sul singolo elemento ( tipo data-id:"data-id-'.$categoriaelemento.'-'.$i.'"); a trasformare l id list in class, a mettere il jQuery noConflict sia in modalità document.ready...ma niente

[cavicchiandrea]

Sarà come dici ma di norma in questi casi

funziona solo il primo

i problemi sono legati agli ID, hai guardato la console di firebug? Prova anche a mettere un link alla pagina pubblica (tuosito.xxx/tuapaginademogallery.xxxx)

[elnigno82]

l'unico errore che da è ReferenceError: fredCarouselSlider is not defined in custom.js, ,ma lo da anche con una gallery

// Main Background Slider Document
jQuery(function($){
    
        $.supersized({
            // Functionality
            slideshow               :   1,            // Slideshow on/off
            autoplay                :    1,            // Slideshow starts playing automatically
            start_slide             :   1,            // Start slide (0 is random)
            stop_loop                :    0,            // Pauses slideshow on last slide
            random                    :     0,            // Randomize slide order (Ignores start slide)
            slide_interval          :   5000,        // Length between transitions
            transition              :   1,             // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed        :    1000,        // Speed of transition
            new_window                :    1,            // Image links open in new window/tab
            pause_hover             :   0,            // Pause slideshow on hover
            keyboard_nav            :   1,            // Keyboard navigation on/off
            performance                :    1,            // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
            image_protect            :    1,            // Disables image dragging and right click with Javascript
                                                       
            // Size & Position                           
            min_width                :   0,            // Min width allowed (in pixels)
            min_height                :   0,            // Min height allowed (in pixels)
            vertical_center         :   1,            // Vertically center background
            horizontal_center       :   1,            // Horizontally center background
            fit_always                :    0,            // Image will never exceed browser width or height (Ignores min. dimensions)
            fit_portrait             :   1,            // Portrait images will not exceed browser height
            fit_landscape            :   0,            // Landscape images will not exceed browser width
                                                       
            // Components                            
            slide_links                :    'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            thumb_links                :    1,            // Individual thumb links for each slide
            thumbnail_navigation    :   0,            // Thumbnail navigation
            slides                     :      [            // Slideshow Images
                                                {image : 'immagini/locale/esterni/1.jpg', title : '<h1>La Location</h1> <p>immagine 1<br> </p>',},
                                                {image : 'immagini/locale/esterni/2.jpg', title : '<h1>La Location</h1> <p>immagine 2<br> </p>',}
                                        ],
                                        
            // Theme Options               
            progress_bar            :    1,            // Timer for each slide                            
            mouse_scrub                :    0
            
        });  
    });



//GLOBAL

var curr_li;
var prev_li;

//MENU CLICK EVENT
$('#sidebarmenu li a, .custom_page').live('click', function(e) {    
    e.preventDefault();    
    api.playToggle();
    
    $("#bgOverlay ").css("display", "block").stop(true,true).animate({opacity:.9}, 850, 'easeOutCubic');
       //animate slide caption
     $("#slidecaption_wrapper").css("position","absolute").stop(true,true).animate({marginRight:'-500px'}, 750, 'easeOutCubic');
     
      //spalsh page
     $("#splash_page").stop(true,true).animate({top:'-1600px'}, 750, 'easeOutCubic');

    var href = $(this).attr("href");            
    
    $('#sidebarmenu li a').removeClass("active");
    if(href!="#") { $(this).addClass("active"); }
    
    
    if(href == location.hash) {
      return;    
    } else {          
      
          if(location.hash=="#"||location.hash.length==0){            
            $("li#"+href).css({display:'block'}).stop(true,true).delay(450).animate({left:'0px'}, 750, 'easeOutCubic');
            location.hash = href;
          } else {
            prev_li = $("li#"+location.hash);
            curr_li = $("li#"+href);
            location.hash = href;
            animatePage();
            
          }
          
    }

});


$('a').live('click', function(e) {
                              
    if(($(this).parents("#sidebarmenu").length==0) && ($(this).parents("#logo").length==0))
    {    
      
      var href = $(this).attr("href");
      if(href=="#") {
        e.preventDefault();
        return; 
      }     
    }
});


//PAGE CLOSE EVENT
$('a.page_close').live('click', function(e) {
    closePage();
    document.location.hash="";
    fredCarouselSlider();
});


//PAGE ANIMATE FN
function animatePage() {

     if(curr_li){
             curr_li.css({display:'block'}).stop(true,true).delay(450).animate({left:'0px'}, 750, 'easeOutCubic');
             
     }
    
     if(prev_li){ 
             prev_li.stop(true,true).animate({left:'-1500px'}, 400, 'easeInSine', function(){ $(this).css({display:'none'})});
     }

     // pf_carouFredSel();
}

//PAGE CLOSE ANIMATE FN
function closePage() {
    $('#ulcontent > li').stop(true,true).animate({left:'-1500px'}, 400, 'easeInSine', function(){ $('#bgOverlay').stop(true,true).animate({opacity:0}, 850, 'easeOutCubic').css({display:'none'})});
    $("#splash_page").stop(true,true).animate({top:'40px'}, 850, 'easeOutCubic');
    api.playToggle();
    $("#slidecaption_wrapper").css("position","absolute").stop(true,true).animate({marginRight:'500px'}, 750, 'easeOutCubic');
    $('#sidebarmenu li a').removeClass("active");
}


//PAGE LOAD
function WIN_LOAD(){  
    $('#dvLoading').fadeOut(2000);
    var all_li = $('#ulcontent > li');
    all_li.css({'display':'none', left:'-1500px'});

    if(location.hash=="" || location.hash.length==0) {
     //spalsh page
     $("#splash_page").stop(true,true).animate({top:'40px'}, 850, 'easeOutCubic');
     
     //animate slide caption
     $("#slidecaption_wrapper").css("position","absolute").stop(true,true).animate({marginRight:'500px'}, 750, 'easeOutCubic');
     
    } else {
        $("#bgOverlay ").css("display", "block").stop(true,true).animate({opacity:.9}, 850, 'easeOutCubic');
        api.playToggle();        
        $("li#"+location.hash).css({display:'block'}).stop(true,true).delay(450).animate({left:'0px'}, 750, 'easeOutCubic', function(){   
             $('#sidebarmenu li a').removeClass("active");            
             $("a[href='"+location.hash+"']").addClass("active");
                                                                                                                         
         });
         
    }
        

}

//REGISTER LOAD EVENT
function listen(evnt, elem, func) {
    if (elem.addEventListener)  
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { 
        var r = elem.attachEvent("on"+evnt, func);
    return r;
    }
}

listen("load", window, WIN_LOAD);



function pf_carouFredSel()
{




}


//Fancy Box Jquery
$(document).ready(function() {
$("a.example6").fancybox({
'titlePosition'        : 'inside',
'overlayColor'        : '#000',
'overlayOpacity'    : 0.9
});
});




// fred carousel slider
$(function fredCarouselSlider() {
  
    //    Responsive layout, resizing the items
   $('.list_carousel').carouFredSel({
  
    responsive: true,
    auto: true,
    width: '100%',
    prev: '#prev3',
    next: '#next3',
    scroll: 1,
    items: {
    //width: 400,
    //    height: '30%',    //    optionally resize item-height
    visible: {
    min:3,
    max: 3
    }
    }
    });
});





// Portfolio hover
function portfoliohover()
{
    jQuery('.portfolio_list li, .list_carousel li').hover(
    function() {
        jQuery(this).find('span.roll').stop().animate({opacity:1},500);
        jQuery(this).find('img').css({opacity:.2});        
    },
    function() {
        jQuery(this).find('span.roll').stop().animate({opacity:0},500);
        jQuery(this).find('img').css({opacity:1})
    });
}



$(document).ready(function(){
    portfoliohover();
    fredCarouselSlider();
});