11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,
Grand pataugeur en JS, je cherche le moyen de manipulé une isolation d'ancre extraite depuis une url pour charger et afficher en Ajax le contenu portant l'ID correspondante.
Pour vous mettre dans le contexte, il s'agit d'un portfolio avec filtre, le chargement par click récupère le l'url d'un php du data-loader correspondant et affiche (contenu + bt prev, bt next et bt close) via un scroll top + un display block d'un container situé au dessus.

Voici un exemple d'appel externe: "monsite.com/page.html#portfolio-item-1"
j'ai vu qu'avec "window.location.hash.split('#')[1]" je pouvais isoler "portfolio-item-1"
Mais je ne sais pas comment procéder le plus simplement possible pour l’intégrer
j'ai des bribes type "if portPostId == window.location.hash.split('#')[1]..." mais pas assez de connaissances et compétences pour le réaliser.

voici le HTML:

<article id="portfolio-item-1" data-loader="include/ajax/portfolio-ajax-1.php" class="portfolio-item fest avril portfolio-active" style="position: absolute; left: 0px; top: 0px;">  
  <div class="portfolio-overlay">
    <a href="#" class="center-icon"><i class="icon-line-expand"></i></a>
  </div>
</article>

<article id="portfolio-item-2" data-loader="include/ajax/portfolio-ajax-2.php" class="portfolio-item expo mars" style="position: absolute; left: 0px; top: 0px;"> blabla </article>

<article id="portfolio-item-3" data-loader="include/ajax/portfolio-ajax-3.php" class="portfolio-item conf juin" style="position: absolute; left: 0px; top: 0px;"> blabla </article>


voici des extraits du jQuery de functions.js:

	JSDEV.portfolio = {

		init: function(){

			JSDEV.portfolio.ajaxload();

		},

.................
// déclencheur par defaut click

		ajaxload: function(){
			$('.portfolio-ajax .portfolio-item a.center-icon').click( function(e) {
				var portPostId = $(this).parents('.portfolio-item').attr('id');
				if( !$(this).parents('.portfolio-item').hasClass('portfolio-active') ) {
					JSDEV.portfolio.loadItem(portPostId, prevPostPortId);
				}
				e.preventDefault();
			});
		},

		loadItem: function( portPostId, prevPostPortId, getIt ){
			if(!getIt) { getIt = false; }
			var portNext = JSDEV.portfolio.getNextItem(portPostId);
			var portPrev = JSDEV.portfolio.getPrevItem(portPostId);
			if(getIt == false) {
				JSDEV.portfolio.closeItem();
				$portfolioAjaxLoader.fadeIn();
				var portfolioDataLoader = $('#' + portPostId).attr('data-loader');
				$portfolioDetailsContainer.load(portfolioDataLoader, { portid: portPostId, portnext: portNext, portprev: portPrev },
				function(){
					JSDEV.portfolio.initializeAjax(portPostId);
					JSDEV.portfolio.openItem();
					$portfolioItems.removeClass('portfolio-active');
					$('#' + portPostId).addClass('portfolio-active');
					$(this).find('[href="#'+ 'portfolio-item' + '"]').addClass('portfolio-active')
                 
				});
			}
		},

...........
		initializeAjax: function( portPostId ){
			prevPostPortId = $('#' + portPostId);

			$('#next-portfolio, #prev-portfolio').click( function() {
				var portPostId = $(this).attr('data-id');
				$portfolioItems.removeClass('portfolio-active');
				$('#' + portPostId).addClass('portfolio-active');
				JSDEV.portfolio.loadItem(portPostId,prevPostPortId);
				return false;
			});

			$('#close-portfolio').click( function() {
				$portfolioDetailsContainer.fadeOut('600', function(){
					$portfolioDetails.find('#portfolio-ajax-single').remove();
				});
				$portfolioDetails.removeClass('portfolio-ajax-opened');
				$portfolioItems.removeClass('portfolio-active');
				return false;
			});
		}

	};



D'avance merci à tous ceux qui se pencheront sur mon cas !
Modifié par oOYOo (25 Sep 2015 - 18:41)