Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mulegoat

Deep link to slide within slideshow

Recommended Posts

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();  
Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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

Link to post
Share on other sites

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 

Link to post
Share on other sites

That is SO much better  :mrgreen: !! 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 

Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×