Lazy loaded images with hyperlinks?

petergeller's Avatar


28 Aug, 2012 05:32 PM


i tried to wrap another anchor around the lazy loaded images but rs init them also.
I sthere a way to handle something like that:

<a href=""><a class="rsImg" href="{image:url:medium}" alt="{image:title}">image desc</a></a>



  1. Support Staff 1 Posted by Dmytro Semenov on 28 Aug, 2012 06:27 PM

    Dmytro Semenov's Avatar


    As you can't nest a elements, you'll need to create empty overlay over slider. Here is markup of slide with link:

    <div class="rsContent">
        <a class="rsLink" href="">link desc</a>
        <a class="rsImg" href="image.jpg" alt="image desc">image desc</a>

    If you downloaded RoyalSlider from CodeCanyon more than a week ago, you won't have rsLink class in royalslider.css. So you should add it manually:

    .rsLink {
        z-index: 20;
        background: url(blank.gif);
        -webkit-backface-visibility: hidden;

    blank.gif is empty image 1x1 px to fix ie bug.


  2. 2 Posted by petergeller on 29 Aug, 2012 04:44 PM

    petergeller's Avatar

    Hmm, i upgraded everything, the css rsLink is there, but this rsLink is also initialized like an image so if i have normally 3 images, i have six now, three rsImgs and rsLinks.
    I don't found also any rsLink inside the royalslider.min.js so that it is handled separately...

  3. Support Staff 3 Posted by Dmytro Semenov on 29 Aug, 2012 05:21 PM

    Dmytro Semenov's Avatar

    Please send me a link to your site and I'll tell you what's wrong with your setup.


  4. 4 Posted by petergeller on 29 Aug, 2012 05:48 PM

    petergeller's Avatar

    The problem is its local at the moment...
    I try to upload it later to test environment.
    No hint what it i miss maybe?

    The code snippet look like this, css is there and i use your actual royal slider.js

                    <div id="contentWrapperTeaser">
                        <div id="wide-slider">
                            <div class="globalMainTeaser">
                                {exp:channel:entries channel="pages_static" url_title="{embed:url_title}" dynamic="off"}
                                <div id="gallery-1" class="royalSlider rsMinW">
                                {exp:channel_images:images entry_id="{entry_id}"}
                                    {if "{image:field:1}" != ""}<a class="rsLink" href="{site_url}{image:field:1}"></a>{/if}
                                    <a class="rsImg" href="{image:url:medium}" alt="{image:title}">image desc</a>
  5. Support Staff 5 Posted by Dmytro Semenov on 29 Aug, 2012 06:42 PM

    Dmytro Semenov's Avatar

    Hm, code seems correct. I don't really understand you have img tag with class rsLink after slider initialization?

    There shouldn't be anything in JS related to rsLink, it just CSS.


  6. 6 Posted by petergeller on 29 Aug, 2012 10:08 PM

    petergeller's Avatar

    Yep so it is.

    So it looks if i only definied the first image field with a link... the problem is that this slide is also counted as image and bullet navigation point.

    <div style="left: 9900px; " class="rsSlide "><a class="rsLink" href="" style="-webkit-transition: opacity 400ms ease-in-out; visibility: visible; opacity: 1; "></a></div>
  7. 7 Posted by petergeller on 30 Aug, 2012 08:37 AM

    petergeller's Avatar

    Oh my, i found it, i missed the wrapper


    Thx, sorry

  8. Dmytro Semenov closed this discussion on 30 Aug, 2012 09:15 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? 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