Can't hyperlink images - Githubissues

dotnetchris commented 13 years ago

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 commented 13 years ago

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 commented 13 years ago

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 commented 13 years ago

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 commented 13 years ago

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 commented 13 years ago

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

clawsonmj commented 13 years ago

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 commented 13 years ago

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

krishh86 commented 12 years ago

@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 commented 12 years ago

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 commented 12 years ago

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

bshorey commented 12 years ago

ok, just switched it. No change.

krishh86 commented 12 years ago

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!

```

This hotel comprises a total of 1,720 guest rooms ```

4 star accommodations elegant design and dcor ```

This beautiful 1,500-room city casino hotel Regards, Krishna On Fri, Jan 20, 2012 at 2:01 PM, bshorey < reply@reply.github.com > 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 commented 12 years ago

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

krishh86 commented 12 years ago

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

On Fri, Jan 20, 2012 at 2:50 PM, bshorey < reply@reply.github.com

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 commented 12 years ago

thanks for your help.

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

jivesamba commented 12 years ago

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

jivesamba commented 12 years ago

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

bshorey commented 12 years ago

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 commented 12 years ago

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.

wceolin commented 11 years ago

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 commented 10 years ago

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>

zurb / orbit

Can't hyperlink images #7