Jump to content
php.lv forumi

Pickery on Click nostrādā tikai vienreiz


ziedinjsh

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
Link to comment
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);});

});
Link to comment
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...