Can't hyperlink images

[dotnetchris]

If I attempt to hyper link images I will get nothing in orbit. I started using orbit after seeing it used on this theme: http://xhtml.webtemplatemasters.com/projects/xhtml/paradise/index-7.html

Their orbit declaration is similar to

    jQuery(window).load(function() {
        jQuery('#orbit-slider').orbit({
            animation: 'horizontal-slide', //fade, horizontal-slide, vertical-slide
            animationSpeed: 800, //how fast animations are
            advanceSpeed: 4000, //if timer advance is enabled, time between transitions 
            startClockOnMouseOut: true, //if timer should restart on MouseOut
            startClockOnMouseOutAfter: 3000, //how long after mouseout timer should start again
            directionalNav: true, //manual advancing directional navs
            captions: true, //if has a title, will be placed at bottom
            captionAnimationSpeed: 800, //how quickly to animate in caption on load and between captioned and uncaptioned photos
            timer: true, //if the circular timer is wanted
            bullets: true //true or false to activate the bullet navigation
        });
    });
<div class="slider_wrapper">
    <div id="orbit-slider">
        <a href="#"><img src="images/slider/slider_pic1.jpg" width="960" height="400" alt="" rel="slidertitle1" /></a>
        <a href="#"><img src="images/slider/slider_pic2.jpg" width="960" height="400" alt="" rel="slidertitle2" /></a>
        <a href="#"><img src="images/slider/slider_pic3.jpg" width="960" height="400" alt="" rel="slidertitle3" /></a>
        <a href="#"><img src="images/slider/slider_pic4.jpg" width="960" height="400" alt="" rel="slidertitle4" /></a>
        <a href="#"><img src="images/slider/slider_pic5.jpg" width="960" height="400" alt="" rel="slidertitle5" /></a>
        <a href="#"><img src="images/slider/slider_pic6.jpg" width="960" height="400" alt="" rel="slidertitle6" /></a>

        <span class="orbit-caption" id="slidertitle1">Donec sed augue cursus diam imperdiet gravida</span>
        <span class="orbit-caption" id="slidertitle2">Morbi nec tellus in nibh sodales iaculis</span>
        <span class="orbit-caption" id="slidertitle3">Nunc malesuada consequat lacus</span>
        <span class="orbit-caption" id="slidertitle4">Curabitur fringilla molestie ornare</span>
        <span class="orbit-caption" id="slidertitle5">Integer dapibus, est vel iaculis varius</span>
        <span class="orbit-caption" id="slidertitle6">Mnec tempor ullamcorper congue</span>

    </div>
</div>

Are they using a custom version of orbit to do this? Because once I wrap my img elements with an A tag they disappear from orbit.

[Baj]

It worked in an older version which it looks like that code is from. I used it but updated to the newest release and the functionality is gone. I have not worked out how to get it working in this version - I am not a JQ expert. I would like it back though.

[dtrkrs]

I had the same problem. Zurb's demo page worked, bit mine wouldn't. Took me all morning to figure it out.

First: get the 'Download Kit' on http://www.zurb.com/playground/jquery_image_slider_plugin

Second: DO NOT USE the MINIFIED VERSION because something is screwed up in there, use jquery.orbit-1.2.3.js instead

You're welcome.

[mkelly12]

Yeah, sorry about that, we pushed a bad minified version of the plugin. We've since removed the minified version from GitHub, and will be releasing the stable code (including the minified version) to the home page on: http://www.zurb.com/playground/jquery_image_slider_plugin

[bshorey]

I know you've closed this issue - but I'm still unable to link images within orbit regardless of whether or not I'm using the full or minified version...

[mkelly12]

Do you have a live example we can take a look at?

[clawsonmj]

I've got this issue where I can't hyperlink the images and the Captions at the same time. When I do both, the caption doesn't appear at all. Is there a way to get this to work?

[clawsonmj]

http://lifesphotographs.com/whd/infocus2/demo.html for reference

[krishh86]

@clawsonmj If you move the data-caption="" field to the anchor tag and remove the anchor tag in the caption span field, you would have the image linked but not the data( if this might help you to live without having hyperlink to captions)

[bshorey]

ok, here is a working example:

http://trinityfel.org/podcast/redesign/

The first image should be of "Kingdoms in Conflict", hyperlinked to the downloads page. However, when I use this code to link the image, the image disappears (it shows the "Blessed" image instead or just plain white), and is not hyperlinked.

git://gist.github.com/1649224.git

EDIT: okay, obviously I'm having trouble getting the code to paste right (???)

[krishh86]

@bshorey I have seen your code, try using data-caption="#firstCaption" in the anchor tag rather than the image tag

[bshorey]

ok, just switched it. No change.

[krishh86]

Hi Bshorey,

There are limitations for this plugin. Either we will have to keep anchor tags for everything or not. I needed anchor tags for every slide so shifting the "DATA Caption" from img tag to anchor tag worked. Below is my code.

Let me know if this helped you out!

    <a href="/Collegiate/Collegiate_Home/About/"

data-caption="#a6442454426" target="_blank" style="display: block; z-index: 3; left: 0px; "> This hotel comprises a total of 1,720 guest rooms

    <a href="/Coaching/Coaching_Home/About_Coaching/"

data-caption="#a6442454424" target="_blank" style="display: block; z-index: 1; left: -300px; "> 4 star accommodations elegant design and dcor

    <a href="/Contact_1/Contact_Us/" data-caption="#a6442454422"

target="_blank" style="display: block; z-index: 1; left: -300px; "> This beautiful 1,500-room city casino hotel

Regards, Krishna

On Fri, Jan 20, 2012 at 2:01 PM, bshorey < [email protected]

wrote:

ok, just switched it. No change.

---

Reply to this email directly or view it on GitHub: https://github.com/zurb/orbit/issues/7#issuecomment-3589545

[bshorey]

ok, so you're saying you have to either link all the images or link no images...

[krishh86]

Yes, unless you change the js code to accommodate both.

On Fri, Jan 20, 2012 at 2:50 PM, bshorey < [email protected]

wrote:

ok, so you're saying you have to either link all the images or link no images...

---

Reply to this email directly or view it on GitHub: https://github.com/zurb/orbit/issues/7#issuecomment-3590306

[bshorey]

thanks for your help.

do the orbit guys have anything to say about this???

[jivesamba]

I still am unable to get images to link. Anybody else got a success story they could share? Thanks in advance.

[jivesamba]

I'm just trying to link straight images inside of Orbit, not using captions at all.

[bshorey]

because I need to go live without resolving the issue - the problem example can now be found here: http://trinityfel.org/podcast/redesign/index2.html

[michaeltieso]

Thought I'd come on here and help out anyone trying to figure this out.. Here's what I did:

`

I'm A Badass Caption Number 1 I'm A Badass Caption Number 2 I'm A Badass Caption Number 3`

So the first slide has the link in both in the image and the caption. Notice that the second and third slide have no link. data-caption needs to be moved to <a href=""> instead of the usual <img src=""> given in the Orbit examples.

[ceolinwill]

Hi, I'm also having issues to link images. The link works but it's breaking thumbnails. If I set a link, then no thumbnails are displayed. It's like the bulletThumbs was set as false. Any ideas?

        <a href="#"><img src="image.jpg" data-thumb="thumb.jpg" /></a>

[masum-mdar]

Replacing ul and li with div and a ,have solved my problem.

<div id="homepage_slider" data-orbit>
     <a href="http://www.github.com"><img src="img.jpg" /></a>
     <a href="http://www.github.com"><img src="img2.jpg" /></a>
     <a href="http://www.github.com"><img src="img3.jpg" /></a>
</div>