WordPress.org

Ready to get started?Download WordPress

Forums

Issues with PrettyPhoto and QuickSand (1 post)

  1. nmp
    Member
    Posted 2 years ago #

    Hey there,

    I've been using a theme called Meshable ( for a client. It has both PrettyPhoto and Quicksand written into the theme.

    I have made a minor adjustment in a gallery page to allow PrettyPhoto to show the images as a slideshow. In the link to the photo I just added rel="[]", but now I need to reinitialize PrettyPhoto so that once the pictures are filtered PrettyPhoto only shows the relevant photos.

    The filter function from functions.js is listed below:

    // *********** Conditional Filter Function *********** //
    		if ( $.browser.msie ) { // if Browser is IE apply custom filtering effect
    
    				$('#sort_entries a').click(function(e) {
    
    					// Prevent Default Behaviour of clicked link
    					e.preventDefault();
    
    					var noCols = $('#main-content').attr('data-ms-gallery-layout');
    
    					// *********** Get Filter Links To Work *********** //
    					$('#sort_entries a').removeClass('active_sort');
    					$(this).addClass('active_sort');
    
    					// *********** FUNCTION: Remove/Add classes on fly for adjustment *********** //
    					function adjustingClass() {
    						$('#source > .site-entry').removeClass("last");
    						$('#source > .site-entry:visible').each(function (i) {
    							i=(i+1);
    							if (i % noCols == 0) { $(this).addClass("last"); }
    						});
    					}
    
    					// *********** Convert Hash Value to Lowercase and Replace Space with Dash(-) *********** //
    					var filterVal = $(this).attr('href').toLowerCase().replace(/ /g,'-').replace(/[^\w-]+/g,'');
    
    					if(filterVal == 'all') {
    						$('#source > .site-entry:hidden, #source > .site-entry > .thumbs-wrapper img:hidden').fadeIn(
    									function() { // Callback of Previous Function
    										adjustingClass();
    									});
    					} else {
    						$('#source > .site-entry').each(function() {
    							if(!$(this).hasClass(filterVal)) {
    								$(this).find(".thumbs-wrapper img").fadeOut();
    								$(this).fadeOut(
    									function() { // Callback of Previous Function
    										adjustingClass();
    									});
    							} else {
    								$(this).find(".thumbs-wrapper img").fadeIn();
    								$(this).fadeIn();
    							}
    						});
    					}
    				});
    
    		} else { // else apply Quicksand effect
    
    			$('#sort_entries a').click(function(e) {
    
    				$('#sort_entries a').removeClass('active_sort');
    				$(this).addClass('active_sort');
    
    				var destination = $(this).attr('data-id');
    
    				window.location.hash = destination;
    
    				$("#source").quicksand($('#'+destination+' article'), {
    					duration: 800,
    					easing: 'swing',
    					enhancement: function() {
    						Cufon.refresh();
    					  }
    				},
    				function() {
    					// Fallback	goes here	
    
    					// Cycle Thumbnail Pagination - Fix
    					$('ul.thumb-pagination').empty();
    
    					// Grayscale Image Fading - Fix
    					var grayScale = $('#wrapper').attr('data-grayscale');
    
    					if ( !$.browser.msie && grayScale == 'false') {
    						grayScaleThumbs();	 // Initiate Hover Effect
    					}
    
    					// Prettyphoto - Fix
    					var lightbox = $('#wrapper').attr('data-lightbox');
    
    					if ( lightbox == 'false' ) {
    						prettyPhotoImg(); // Initiate PrettyPhoto
    					}
    				});
    				$(this).addClass("active");
    				return false;
    				prettyPhotoImg();
    			});
    
    		}

    Anyone have any ideas on how I can do this?

    Thanks,
    Nick.

Topic Closed

This topic has been closed to new replies.

About this Topic