Lazy loaded images with hyperlinks?

petergeller's Avatar

petergeller

28 Aug, 2012 05:32 PM

Hi,

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="http://www.google.de"><a class="rsImg" href="{image:url:medium}" alt="{image:title}">image desc</a></a>

Thx

Peter

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

    Dmitry Semenov's Avatar

    Hi,

    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="http://google.de">link desc</a>
        <a class="rsImg" href="image.jpg" alt="image desc">image desc</a>
    </div>
    

    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 {
        left:0;
        top:0;
        position:absolute;
        width:100%;
        height:100%;
        display:block;  
        z-index: 20;
        background: url(blank.gif);
        -webkit-backface-visibility: hidden;
    }
    

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

    Dmitry

  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 Dmitry Semenov on 29 Aug, 2012 05:21 PM

    Dmitry Semenov's Avatar

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

    Dmitry

  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>
                                {/exp:channel_images:images}
                                </div>
    
                                {/exp:channel:entries}
                            </div>
                        </div>
                        
                    </div>
    
  5. Support Staff 5 Posted by Dmitry Semenov on 29 Aug, 2012 06:42 PM

    Dmitry 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.

    Dmitry

  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="http://192.168.178.24/referenzen/showcases/audimark-corporate-2010" 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. Dmitry 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

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