11523 sujets

JavaScript, DOM et API Web HTML5

Bug capricieux... un js mal construit ? Noob inside...

Bonjour à tous,


Je travaille actuellement sur le portfolio de ma compagne, dont une version test est accessible ici.

Mon problème, donc, se situe sur ce type de page.
Dans cette galerie, il est possible, en cliquant sur une image, d'accéder à une version agrandie de celle-ci (même principe qu'une lightbox). Malheureusement, et de façon étrangement assez erratique (?), j'ai constaté parfois un problème de positionnement vertical de l'image, principalement sur des petits écrans... L'image se retrouve alors vers le bas de l'écran, et non centrée comme prévu.

Mon principal problème est donc, vous l'aurez compris, que je n'arrive pas à reproduire le bug de façon suffisamment systématique, pour identifier et solutionner le problème correctement. J'en appel donc à la bonne volonté de celles/ceux qui voudront bien jeter un oeil sur cet écran/ce code, afin de m'aider à trouver l'origine du problème, et si possible du coup une solution Smiley smile 

// ZOOM galeries
var zoomgalleries = function() {
	$('.gallery-item').on('click', 'a', function(e) {
		e.preventDefault();

		// On récupère l'index de l'élément cliqué
		var selectedItem = $('.gallery-item').index( $(this).closest('.gallery-item') );

		// On récupère les url full-sized pour chaque image
		var listUrls = [];
		$(this).closest('.gallery').children('.gallery-item').each(function() {
			var bigUrl = $(this).find('a').attr('href');
			listUrls.push(bigUrl);
		});
		// On récupère les descriptions pour chaque image
		var listDesc = [];
		$(this).closest('.gallery').children('.gallery-item').each(function() {
			var thbDesc = $(this).children('.gallery-thumb').data('thumb-desc');
			listDesc.push(thbDesc);
		});
		
		// On construit le DOM de la Zoombox...
		var ZboxHtml = '<div id="zoombox"> \
							<ul class="slideshow"></ul> \
							<a href="#" data-zoombox="prev" title="Précédent"></a> \
							<a href="#" data-zoombox="next" title="Suivant"></a> \
							<a href="#" data-zoombox="close" title="Revenir à la galerie"></a> \
						</div>';

		$(this).closest('.gallery').before(ZboxHtml);

		for(i=0;i<listUrls.length;i++) {
			if( listDesc[i] ) {
				$('#zoombox').children('ul').append('<li><img src="'+listUrls[i]+'" /><span class="desc">'+listDesc[i]+'</span></li>');
			} else {
				$('#zoombox').children('ul').append('<li><img src="'+listUrls[i]+'" /></li>');
			}
		}

		// On fixe la largeur du slideshow, et on le positionne selon l'élément cliqué
		$('#zoombox').children('ul').css({
			'width': (100 * listUrls.length) + '%',
			'marginLeft': -(selectedItem * 100)+'%'
		}).children('li').css('width', (100 / listUrls.length) + '%');

		// Affichage de la navigation en fonction de la position du slideshow
		$('[data-zoombox="next"], [data-zoombox="prev"]').hide();
		var manageArrows = function() {
			var slideshowMargin = parseInt( $('.slideshow').css('marginLeft') );
			var slideshowWidth = $('#zoombox').parent().width();
			var limitMax = -((slideshowWidth - 10) * (listUrls.length -1));

			if( slideshowMargin == 0 ) {
				$('[data-zoombox="prev"]').hide();
				$('[data-zoombox="next"]').show();
			} else if( slideshowMargin == limitMax ) {
				$('[data-zoombox="next"]').hide();
				$('[data-zoombox="prev"]').show();
			} else {
				$('[data-zoombox="prev"]').show();
				$('[data-zoombox="next"]').show();
			}
		};
		// Centrage vertical des slides
		var vAlign = function() {
			$('.slideshow').children('li').each(function() {
				var slideH = $(this).parent('.slideshow').height();
				var imgH = $(this).children('img').height();
				var descH = $(this).children('.desc').outerHeight(true) || 0;
				var diff = slideH-(imgH+descH);

				if( diff > 0 ) {
					$(this).css({'paddingTop': (diff/2) + 'px'});
				}
			});
		};
		// ...et une fois ce DOM prêt, on affiche
		$('#zoombox').find('li').children().css('opacity', 0);

		$('#zoombox').parent('.content-gallery').scrollTop(0).addClass('noscroll').children('#zoombox').fadeIn('100', function() {
			vAlign();
			$(this).find('li').children().animate({'opacity': 1}, 200);
			manageArrows();
		}).parent('.content-gallery').siblings('.content-footer').not('.folded').addClass('folded').find('.description').slideToggle('fast');

		// Comportements
		$('#zoombox').on('click', '[data-zoombox="close"]', function(z) {
			z.preventDefault();
			$(this).closest('#zoombox').parent('.content-gallery').removeClass('noscroll').children('#zoombox').fadeOut('300', function() {
				$(this).remove();
			}).parent('.content-gallery').siblings('.content-footer.folded').removeClass('folded').find('.description').slideToggle('fast');;
		});

		var oneatatime = true;
		$('#zoombox').on('click', '[data-zoombox="next"]', function(n) {
			n.preventDefault();
			if( oneatatime ) {
				oneatatime = false;
				$(this).siblings('.slideshow').animate({
					'marginLeft': '-=100%'
				}, 600, function() {
					vAlign();
					manageArrows();
					oneatatime = true;
				});
			}
		});
		$('#zoombox').on('click', '[data-zoombox="prev"]', function(p) {
			p.preventDefault();
			if( oneatatime ) {
				oneatatime = false;
				$(this).siblings('.slideshow').animate({
					'marginLeft': '+=100%'
				}, 600, function() {
					vAlign();
					manageArrows();
					oneatatime = true;
				});
			}
		});
		//
		$(window).on('resize', function() { vAlign(); });
	});
};

//////////////
//  READY!  //
//////////////
$(document).ready(function(){
	if( $('.gallery-item').length !== 0 ) {
		// MASONRY
		var $container = $('.gallery');
		$container.imagesLoaded(function() {
			$container.masonry({
				columnWidth: '.grid',
				gutter: 0,
				itemSelector: '.gallery-item'
			});
		});

		// ZOOM galeries
		zoomgalleries();
	}
});


Merci encore par avance ! Smiley ravi [/i][/i][/i][/i]
Salut,

je n'ai pas réussi a reproduite ton bug.. Smiley decu pour j'ai tester avec toutes les résolutions possible, meme du 600x400
Bonjour,


Déjà, merci pour avoir consacré du temps à chercher ce maudit bug ! Smiley smile

De mon côté, j'ai poursuivi mes investigations, et j'ai comme le pressentiment que le problème pourrait être lié au chargement de l'image : peut-être faudrait-il s'assurer que la fonction "valign" ne se déclenche pas avant la fin du chargement de l'image, ou quelque chose comme ça, quitte à ce que l'image soit d'abord collée en haut, avant de se recaler correctement ?

Bon, le site est mis en ligne malgré tout (hortensevinet.net), mais je pense qu'il faudrait creuser de ce côté là pour améliorer le fonctionnement de la "zoombox", non ?


Merci d'avance pour vos réponses
Sujet clos
Aller à