Pickery on Click nostrādā tikai vienreiz

[ziedinjsh]

Sveiki! Saskāros ar to, ka veicot 

$(el).on('click', function(){});

ar ko tiek ielādētas bildes no attiecīgās sadaļas, pēc tam ar imagesLoaded() pluginu pārbauda vai visas bildes ielādētas un ja viss ir ok tad packery plugins sakārto viņas.
Pirmo reizi nospiežot uz izvēlēto sadaļu viss smuku ielādējas un sakārtojas, bet kad nospiež uz nākošo, bildes ielādējas, bet packery nenostrādā, kā to labot, kas tur par vainu?

$(el).on('click', function(){
    check_content();
});

function check_content(){
    $('.content').imagesLoaded()
        .done(function(instance){
	    $('.content').fadeIn(500, function(){
		$('.content').packery({itemSelector: '.photo', gutter: 10});
	    });
			
	});
};

imagesLoaded plugins
packery plugins
Paldies jau iepriekš!

Edited July 9, 2016 by ziedinjsh

[jurchiks]

Debugot nemēģināji? Vai .done()/fadeIn()izsaucas?

[Леший]

Izmanto subselektoru:
 

$(wrapper).on('click', subselector, function(){})

[ziedinjsh]

kā jau teicu, bildes man ielādējas,saturs parādās, bet bildes nesakārtojas, nenostrādā tikai packery funkcija.
meiģināju šādi:

$(document).on('cilck', el, function(){});

packery nenostrādā vienalga

[ziedinjsh]

Un tagad jau šāda problēma ir ar fancybox. 1x nostrādā, bet kā ir atkārtoti ielādēt ar jquery nenostrādā. packery un fancybox man it kā funkcijas kuras tiek izsauktas katru reizi kad notiek on('click'). viss funkcijā nostrādā izņemot packery un fancybox.
 

functions.js:
 

$(document).ready(function(){
	$.fn.extend({
		check_content: function(type){
			$('.content').html('');
			$('.content').imagesLoaded()
			.done(function(instance){
				$('.content').fadeIn(500, function(){
					$('.content').packery({itemSelector: '.'+type, gutter: 10});
					$('#loader').fadeOut(500);
					$(document).preview();
				});
			})
			.fail(function(){console.log('all images loaded, at least one is broken');})
			.progress(function(instance, image){ var result = image.isLoaded ? 'loaded' : 'broken'; console.log( 'image is ' + result + ' for ' + image.img.src );});
		}
	});
	
	$.fn.extend({
		preview: function(){
			$('.preview').attr('rel', 'album').fancybox({
			modal: false, //false
			openEffect : 'elastic',
			closeEffect : 'elastic',
			prevEffect : 'fade',
			nextEffect : 'fade',
			transitionIn: 'elastic',
			transitionOut: 'elastic',
			titlePosition: 'over',
			arrows : true,
			padding: 0,
			helpers : {
				media : {},
				buttons : {},
				tittle: {
					type: 'inside',
					position : 'top'
				},
			},
			beforeShow : function() {
				//uztaisa linku ar bildes id
				console.log('pieliek pie url bildes id');
			},	
			beforeClose : function() {
				console.log('te noņem bildes id no url!?');	
			},
			afterClose : function() {
				console.log('aizver logu');
			}
		});	
		}
	});

});

un app.js:
 

$(document).ready(function(){
	$.getScript('jquery/app.functions.js');
	var pages = {
			index: {url: 'php/getFront.php'},
			session: {url: 'php/getAlbums.php?cat=session', type: 'album'},
			fashion: {url: 'php/getPhotos.php?cat=fashion', type: 'photo'},
			couple: {url: 'php/getAlbums.php?cat=couple', type: 'album'},
			wedding: {url: 'php/getAlbums.php?cat=wedding', type: 'album'},
			family: {url: 'php/getPhotos.php?cat=family', type: 'photo'},
			maternity: {url: 'php/getPhotos.php?cat=maternity', type: 'photo'},
			kids: {url: 'php/getPhotos.php?cat=kids', type: 'photo'},
			about: {url: 'php/about.php', type: 'html'}
		}
	var app = $(document);
	var loader = $('#loader');	
	var content = $('.content');
	
	$(document).on('click', '.menu li', function(){
		if(!$(this).hasClass('active')){
			loader.fadeIn(500);
			var section = $(this).attr('id');
			var type = pages[section].type;
			var url = pages[section].url;
			$('.menu li').removeClass('active');
			$(this).addClass('active');
			
			if(type == 'album'){
				$.getJSON(url, function(data){
					$.each(data, function(i, item){
						$('.content').append('<div class="album" id="'+item.id+'">'+
							'<img class="load" src="/photos/500/'+item.image+'"/>'+
							'<div class="album-title">'+item.title+'</div>'+
							'</div>');
					});
				});
				app.check_content('album');	
				
			}else if(pages[section].type == 'photo'){
				$.getJSON(url, function(data){
					$.each(data, function(i, item){
						$('.content').append('<div class="photo" id="'+item.id+'"><a class="preview" href="/photos/'+item.name+'" rel="album"><img src="photos/500/'+item.name+'" /></a></div>');
					});
				});
				app.check_content('photo');
				
			}else if(pages[section].type == 'html'){
				
				loader.fadeOut(500);
			}
		}
	});
	
	app.on('click', '.album', function(){
		$('.menu li').removeClass('active');
		var album_id = $(this).attr('id');
		$.getJSON('php/getAlbum.php?id='+album_id, function(album){
			$.each(album, function(i, photo){
				$('.content').append('<div class="photo" id="'+photo.id+'"><a class="preview" href="/photos/'+photo.name+'" rel="album"><img src="photos/500/'+photo.name+'" /></a></div>');
			});
		});
		app.check_content('album-photo');
	});
	
	
	
	$(window).bind('load', function(){loader.fadeOut(500);});
	$('.menu-list').on('click', function(){$('.menu').slideToggle(300);});

});

[ziedinjsh]

Katrā ziņā, risinājumu es vēl neesmu atradis...

[indoom]

Ieliec tos visus app.check_content();  iekšā ajaxa (getJSON) callbacka funkcijā.

Edited July 14, 2016 by indoom