Deep link to slide within slideshow

[mulegoat]

Hi there 

 

I have a nav that links to slides with tweens in between. The slideshow navigation works fine by loading each slide according to it's position on the list. See the following pen

 

See the Pen ruHhD by mulegoat (@mulegoat) on CodePen

 

The problem I'm having is trying to link to a certain slide from within each slide. Using the following code works on all but one "Link to page 2" link - in this case, the link within the first slide - but on my localhost its slide 5 where the link fails.

 

I know this is more of a jquery issue but though I'd put it up here incase somebody had a better way of doing this with getElementById or something else.

 

Many thanks for any help

function initActionPlan() {
	  $(".actionPlanLink").each(function(index, element) {
	    $(this).on("click", gotoActionSection);
	  });
	}



	function gotoActionSection(e) {
	  if(currentSectionNum != $(e.currentTarget).index()){
				if(currentSection) {
					TweenLite.to(currentSection, 0.5, {autoAlpha:0});
				}
				currentSection = $(".tabsContainer")[1];
				TweenLite.to(currentSection, 0.2, {autoAlpha:1});

	  }

	}

	//OpenClose Action Plan

	function actionInit(){
	  initActionPlan();
	  $(".actionPlanLink")[1].click();
	}

	actionInit();  

[Chrysto]

Hi,

 

When it comes to "deep linking" most of the people thought about url hashtag followed by section name, so you can navigate trough pages and still have back/forward in the browser history.

 

I find it little hard to follow your code, do you want to rewrite it in my way? I prefer to use element ID's and classes, but it can be also done with jQuery's eq() selector. 

 

See the Pen quiIv by burnandbass (@burnandbass) on CodePen

Here is a quick snipplr. I just added ID's to the tabs and navigate to all them via the anchors href attribute. This way I can write only one function that changes content. 

 

Also, I'm used to use jQuery's filter() method and caching the DOM, because of the performance. 

 

 

P.S. do you know, GSAP CSSPlugin have property "className" and you can use it to animate the navigation:

 

here is a pen : 

See the Pen wDjlg by burnandbass (@burnandbass) on CodePen

 

Cheers, Ico

[mulegoat]

Apologies, I did not mean deeplinking in regards to the url change, just accessing a particular slide within the list as opposed to mapping the div classes to a list. The code is based on a codepen by Greensock 

See the Pen iLosa by GreenSock (@GreenSock) on CodePen

 

If you have any better ways of achieving this that would be great

[Chrysto]

Hi,

 

Here is my pen : 

See the Pen wDjlg by burnandbass (@burnandbass) on CodePen

 

There are a lot of ways to achieve an effect, also different styles of writing code... I'm not saying mine is better, just see which one is working best for you.

 

 

Cheers, Ico 

[mulegoat]

That is SO much better  !! I was hoping to add the updated navigation style like you've done with the currentTab function - this is fantastic. Thank you so much for your help. Now I am off to study your code 

[Chrysto]

Hi, write me a message if something confuses you.

 

I use jQuery add() method to merge selections ( to catch click() on both externall and in-tab navigation)

 

Also, as I mentioned I use to cache the DOM - then find the element I need with jQuery's filter() method - it is up to 10 times faster then creating a new jQuery selection.

 

 

Cheers, Ico