Link/anchor to specific slide on different page?

[amandabeau]

Hello,

I'm working on re-creating a Flash website - but minus the Flash. Client wants things to look/act similarly to the original Flash site.

Basically, the whole site is run using a big Flexslider. I'm trying to use the controlNav attribute, as well as be able to navigate to the individual slides as if they were different pages (using a traditional navigation bar).

Issue #106 is the closest I've come to finding a solution. I've implemented that program, but since each root page (about.html, services.html) essentially has it's own Flexslider, the .rel variables from page to page are similar. If the currentSlide is within "about", and then I try to navigate to a sub-slide within "service" (using the drop-down nav), it parses the corresponding .rel from "about".

Does that make any sense?? (Forgive me, I'm a designer-learning-to-develop and am still a little unfamiliar with the lingo)...

Thank you, thank you in advance! Any response is much appreciated!!

You can see an example of my mess at:

http://www.zciinc.com/test/about.html

[mattyza]

Hi @amandabeau,

While this isn't strictly a bug/issue with FlexSlider, I'll see if I can advise. :)

With the amount of content you have on the website, and the design idea with the FlexSlider, I'd advise keeping things simple and using a single page for all the content. This would mean you're not switching between "about.html" and "services.html" at all, making things a bit easier to manage.

I hope this helps. :)

[amandabeau]

Thanks Matty,

You're right, I should probably rethink the entire design huh? The original site is www.zciinc.com (you probably looked at it)...and they like that whole "flashy" animation thing between pages. They want all the subpages as links...but I'm trying my best to convince them otherwise. Maybe if I just present them with something totally different (but kick-ass) they'll see the light...lol!

[mattyza]

Design is a very subjective industry, unfortunately. :)

Perhaps create an awesome new design and use a FlexSlider on the homepage to showcase large, high quality images relating to the brand.

That could provide a "flashy" element to your slick design. :)

[Clocktower]

mattyza

If you don't mind. There are cases where someone might want to link to a specific slide from another page, could you share your insight on this. This thread comes up while searching for this type of functionality. It would be good to know how to implement.

[mattyza]

@Clocktower No problem. :)

A rough idea would be to use the # in the URL (for example, #slide-2) and then, in your JavaScript, use window.location.hash and strip out "slide-" to get the number of the slide. From there, when you initialise FlexSlider, you can set the "startAt" property to be the value in the hash (in this case, 2).

I hope this helps. :)

[Clocktower]

That is a great start, and I appreciate the help. startAt is based on the array of slides. Is there any workaround that would allow us to use startAt id="slide-356"? for example.

We are linking icons from another page. The icons that we are linking from can link using the slide post ID as a URL variable, but not the slide order number that startAt relates to as it is output on the page. This seems like an array that jQuery creates to count the number of slides.

So icon 1 on the homepage, can link to slide post number 356, but there is no way for us to correlate that to the slide order on the subpage, such as slide number 3 or startAt = 3. We have the slide post ID of 356 to go off of.

[mattyza]

@Clocktower You could use jQuery's .index() method to retrieve the index (number) of the specified ID. :) http://api.jquery.com/index/

[nickberens360]

Can anyone provide a quick code snipet for this? I need to have a link on all pages of a site that link back to a specific slide on the homepage. I just don't have the code skills to work through the info provided above. Pretty please??

[Clocktower]

We ended up using a query string such as yourwebsite.com/?slideid=440

We then added the following jquery snippet to the Flexslider Properties to start at the appropriate slide: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

<?php if ($slideid != '') { ?> var listItem = document.getElementById('slide-<?php echo $slideid; ?>'); var startAtNum = jQuery('ul.slides li').index(listItem)

    args.startAt  = startAtNum;
<?php } else { ?>
    args.startAt = 0;
<?php } ?>

We also set the slideshow to false so it would not play any additional slides, not show above.

I hope that helps.

[nickberens360]

Perfect ty!

[postjoe]

Here's our variation on this theme for linking to specific slides in flexslider (link to slide flexslider);

In the footer on the page where the slider instance lives:

script type="text/javascript"> var startAtNum = 0;

        <?php if (isset($_GET['startsAt'])){ ?> 
            startAtNum = <?php echo $_GET['startsAt']; ?>;
        <?php } ?>

        $(function(){
              SyntaxHighlighter.all();
            });
            $(window).load(function(){
              $('.flexslider').flexslider({
                animation: "slide",
                startAt: startAtNum,
                start: function(slider){
                  $('body').removeClass('loading');
                }
              });
            });
    </scrip

On the the page where the link to the slide is, add the id to the images/links in question like so: slideid=0

For example the image src would be: img src="http://placehold.it/120x120/cccccc/ffffff/?slideid=0" /

I dropped the "<" and ">" here so that code would show in the comment. noob.