Deep-linking with individual names

Stef's Avatar

Stef

23 Aug, 2012 08:11 AM

I would love a possibility to add individual hashes to each slide, e.g. "/#design-project-xyz", "/#something-to-see", "/#another-project"… complementing the option of a fixed prefix.

The attached screenshot shows something i have done until recently that used to work perfectly. I was hoping that i could get it to work with v9 if i replace the "currentSlideId" property with the new "currSlide"… but the "afterSlideChange" function has changed if i am not mistaken and i can not wrap my head around a different implementation it yet…

Best regards + have a brilliant day!

Steffen

  1. Support Staff 1 Posted by Dmitry Semenov on 23 Aug, 2012 08:31 AM

    Dmitry Semenov's Avatar

    Hi,

    I recommend you editing deeplinking module, as logic there is much more advanced and user friendly.

    First of go and download archive with all latest unminified JS files from here http://dimsemenov.com/private/home.php

    In folder modules, you'll find jquery.rs.deeplinking.js file. Here is line that you need: https://skitch.com/diiiimaaaa/eqefb/jquery.rs.deeplinking.js-new-ro...

    Value of alt attribute you may get through caption property - self.currSlide.caption log it to see what's inside.

    Also, don't forget to enable deeplinking module from options http://dimsemenov.com/plugins/royal-slider/documentation/#deeplinking

    Dmitry

  2. 2 Posted by Stef on 23 Aug, 2012 08:47 AM

    Stef's Avatar

    I guess i will be in for a ride : )
    Thank you so much for the light-speed reply!

  3. 3 Posted by Stef on 25 Aug, 2012 05:51 PM

    Stef's Avatar

    Enabled globalCaption, deep-linking and changed the dl-module accordingly:

    window.location.hash = (self.currSlide.caption);
    

    If i define the caption via img alt-attribute, hash does change fine, else i get "[object Object]" as a logged value…

    The second part, modifying the getSlideIdByHash() function, so that the link actually returns the correct slide, is a bit more complex for me – help (again) would be very much appreciated…

    Edit: Ok, this works, but i am not sure that it is an elegant solution:

    var hashChange = self.st.deeplinking.change;
    var getSlideIdByHash = function() {
        var h,
            hash = window.location.hash,
            hashes = {},
            index = 0;
    
        $('.rsContent').each(function(i) {
            h = $(this).attr('alt');
            hashes[h] = i;
        });
    
        if(hash) {
            index = hashes[hash.substring(1)] || index;
            return index;
        }
        return -1;
    }
    
    var id = getSlideIdByHash();
    
  4. Support Staff 4 Posted by Dmitry Semenov on 25 Aug, 2012 06:50 PM

    Dmitry Semenov's Avatar

    Sometimes adding [0] might help you get string from object - currSlide.caption[0]

    Simly log currSlide object in Chrome Dev Tools or Firebux and see what's inside.

    https://skitch.com/diiiimaaaa/eq2e1/image-gallery-with-fullscreen-o...

  5. 5 Posted by Stef on 25 Aug, 2012 07:15 PM

    Stef's Avatar

    Thanks!

    If i define a caption via rsCaption…

    <figure class="rsCaption">This caption <b>HTML</b> text will be used.</figure>
    

    this is what is logged. It is obviously a bit more than i expected : )

    jQuery(".royalSlider").data("royalSlider").currSlide.caption

    <figure class="rsCaption">
    "This caption "
    <b>HTML</b>
    " text will be used."
    </figure>
    
  6. 6 Posted by kurtis on 01 Sep, 2012 04:55 AM

    kurtis's Avatar

    Did you end up getting this working properly? I'd love to just replace the "#" with a "/" if that's a possibility so someone can go to a url such as http:MyDomain.com/travel/04 and have that photo show

  7. 7 Posted by Stef on 02 Sep, 2012 07:50 AM

    Stef's Avatar

    Yes, it is working properly – i never intended to remove the "#" though… yet.

    Maybe you find something helpful here:
    http://benalman.com
    http://stackoverflow.com/questions/3376010/removing-the-from-window...
    http://bit.ly/Saa1tm

  8. 8 Posted by kurtis on 02 Sep, 2012 01:27 PM

    kurtis's Avatar

    Could you conceivably just change the following line?

    var prefix = '#' + self.st.deeplinking.prefix;
    ... to
    ... var prefix = '/' + self.st.deeplinking.prefix;
    [www.url.com/travel/nyc/04] ... or
    ... var prefix = '-' + self.st.deeplinking.prefix;
    [www.url.com/travel/nyc-04

    ?

  9. 9 Posted by Stef on 03 Sep, 2012 10:08 AM

    Stef's Avatar

    @Kurtis: that would not result in what you hoped for, unfortunately.

    Steffen

  10. Support Staff 10 Posted by Dmitry Semenov on 05 Sep, 2012 05:11 AM

    Dmitry Semenov's Avatar

    @Kurtis to change URL without page reloading you'll have to use HTML5 browser history API, but it's all on your own.

    Dmitry

  11. 11 Posted by Stef on 06 Sep, 2012 02:00 PM

    Stef's Avatar

    Thanks for clarifying, Dmitry.

    Custom/Individual deep-linking names work like a charm… Is it possible to target individual slides by name? E.g. "#prefix-01" or by id-numbers only… e.g. "sliderInstance.goTo(3);"?

    S*

  12. Support Staff 12 Posted by Dmitry Semenov on 07 Sep, 2012 05:31 AM

    Dmitry Semenov's Avatar

    Without customizations, only by id.

    Dmitry

  13. 13 Posted by toscano17 on 26 Sep, 2012 04:16 AM

    toscano17's Avatar

    Hello!, I need your help, i`m trying to implmente this, but i'm doing something wrong, could you help, please?

    I have this:

    <script >
    
        var sliderHomeJ = jQuery.noConflict();
    
       jQuery(document).ready(function(sliderHomeJ) {
    

    sliderHomeJ('#full-width-slider').royalSlider({

    arrowsNav: true,
    loop: false,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fill',
    arrowsNavAutoHide: false,
    autoScaleSlider: true, 
    autoScaleSliderWidth: 0,     
    autoScaleSliderHeight: 0,
    controlNavigation: 'bullets',
    thumbsFitInViewport: false,
    navigateByClick: true,
    startSlideId: 0,
    autoPlay: false,
    transitionType:'move',
    sliderDrag:true,
    globalCaption: false,
    sliderTouch:true,
    deeplinking: {
            // fullscreen options go gere
            enabled: true,
    
        },
    slidesSpacing:0
    

    }); });

            <img class="rsImg" src="<?php bloginfo('template_directory')?>/royalslider/img/full-width/2.jpg" alt="" />
            <figure class="rsCaption">This caption <b>HTML</b> text will be used.</figure>
    
          </div>
    
  14. 14 Posted by toscano17 on 26 Sep, 2012 06:16 AM

    toscano17's Avatar

    Hi, again. The caption appears in the url, but when I try to go to a specific slide it doesn't work, could you help, i will do really be thankful about this. I think is the that redirects

  15. 15 Posted by bripirie on 27 Sep, 2012 03:14 PM

    bripirie's Avatar

    Feature request: It would be great to see this added to the next version of royalSlider - a simple way to specify any string for the deep link for each slide, instead of having them just numbered with a prefix.

  16. 16 Posted by bripirie on 30 Sep, 2012 11:55 PM

    bripirie's Avatar

    Stef: Would you be able to attach your modified version of the royalslider code that supports deep linking with individual names?

  17. 17 Posted by Jonny on 20 Dec, 2012 09:12 PM

    Jonny's Avatar

    I would LOVE to see this implemented in a future release.

  18. 18 Posted by Conrad on 15 Jan, 2013 12:39 AM

    Conrad's Avatar

    I needed this as well and wrote a little plugin using the great History.js library which is mandatory for this.
    (unfortunately, github messed with the whitespace and intentions a bit). Feel free to comment/enhance etc on github :)

    @Dmitry: your slider is aweseome! I really like it, thank you very much. Good job!

  19. 19 Posted by Conrad on 15 Jan, 2013 06:11 PM

    Conrad's Avatar

    I made this Little Plugin to Support the html5 history API and custom uris.
    https://gist.github.com/4534893

    @dmitri, if you like it, feel free to add it (or parts of it) to your slider

  20. Support Staff 20 Posted by Dmitry Semenov on 16 Jan, 2013 10:41 AM

    Dmitry Semenov's Avatar

    @Conrad Thanks a lot, I'm sure it'll help someone.

    I'll test it and possibly include to official build.

    Dmitry

  21. 21 Posted by travxrose on 24 Jan, 2013 04:47 PM

    travxrose's Avatar

    This is great! @Conrad do you have an example of this working?

    travxrose

  22. 22 Posted by Conrad on 24 Jan, 2013 04:55 PM

    Conrad's Avatar

    yeah, its online here but the source code is compressed for a faster page load http://www.sonntagnacht.de/ -
    thanks to silex, there is also the uncompressed main class avaiable which also initializes the slider from line 141 and other stuff until line 309 http://www.sonntagnacht.de/js/sonntagnacht.js, this class is simply initialized in http://www.sonntagnacht.de/js/main.js

    but this might all change in the future - it's not carved in stone ;)

    Edit:
    the plugin itself is uncompressed located here http://sonntagnacht.de/js/vendor/slider/modules/jquery.rs.history-a...

  23. 23 Posted by julian on 13 Feb, 2013 12:33 PM

    julian's Avatar

    Conrad you have been so helpful. Thank you very much!

    Everything works, except when I refresh the page with new URL, then the site can't locate that page.
    On Sonntagnacht.de do you use any form of redirects (.htaccess)? I couldn't seem to find anything in your sonntagnacht.js file.

    Anyway, thanks again.
    Also big thanks to the creator Dmitry, you are great.

  24. 24 Posted by Conrad on 13 Feb, 2013 01:55 PM

    Conrad's Avatar

    Yes, Julian, you need to take care of this by yourself. On sonntagnacht.de, there is a .htaccess which redirects all urls using mod_rewrite to index.php.

    <ifModule mod_rewrite.c>
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteCond %{REQUEST_URI} !index
        RewriteRule (.*) index.php [L]
    </ifModule>
    

    My website runs with silex, so I needed to catch all these virtual uris in silex' 404 exception too

  25. 25 Posted by julian on 14 Feb, 2013 05:46 AM

    julian's Avatar

    Aah ok. Thank you kindly, Conrad. Good luck with everything.

  26. 26 Posted by atblue on 20 Feb, 2013 05:40 PM

    atblue's Avatar

    Stef, I second bripirie: would you consider posting the jquery.rs.deeplinking.js modified code that you managed that allows for custom URLs on deep links? I kinda followed it in concept but would be nice to see your file for comparison.

    thanks so much if you are still around and get this!

    -chris

  27. 27 Posted by Stef on 21 Feb, 2013 08:55 AM

    Stef's Avatar

    Yes, i am still around, but can hardly find any time to follow this at the moment… I am very enthusiastic about Conrads implementation though, it looks brilliant.

    You can of course find my file attached, but i believe there are much better and less intrusive ways to reach for the desired goal:

    http://www.steffenheidemann.com/_preview/rs-modified_deeplinking.js

    @Dmitiry: you need to implement the proper solution one day : ))

  28. 28 Posted by atblue on 21 Feb, 2013 04:52 PM

    atblue's Avatar

    @Stef: thank you for that. much appreciated.

    I agree, Conrads implementation looks great, and I will investigate his further, but need a quick down and dirty solution so that we can begin linking, and then I'll swap it out with a more robust, elegant one.

  29. 29 Posted by Stef on 21 Feb, 2013 04:54 PM

    Stef's Avatar

    Good luck!

  30. 30 Posted by laurent on 22 Mar, 2013 07:02 PM

    laurent's Avatar

    Hi guys!

    Do you have some news about the deeplinking plugin based on History API?
    Do someone else than Conrad managed to make it work?
    Are you working Dmitry on an official integration in the next versions of the slider?

    Thanks for your answers and your amazing work! :-)

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Bildschirmfoto_2012-08-23_um_10.07.21.png 63.1 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac