Jump to content
php.lv forumi
ziedinjsh

Pickery on Click nostrādā tikai vienreiz

Recommended Posts

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 by ziedinjsh

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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);});

});

Share this post


Link to post
Share on other sites

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

Edited by indoom

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...