Using jcarousel, how can I get the images’ re-directing links to display in an extern

[sam9461]

Using jcarousel, how can I get the images’ re-directing links to display in an external div


Hi, I’m a new user of jCarousel. I have about 16 images, each image has a re-directing link to a web page. However, my jCarousel only show 5 images, and is running in ‘circular’ mode. When a ‘left’ or ‘right’ button is clicked, 3 images will go off, and another 3 images will come out. When the click continues, the images will continually change. If any one of 5 images showing in the jCarousel is clicked, it will be re-directed to a web page, the web page will come out.

Now, I want to get the re-directing links of the images that are showing in the jCarsouel, and display the links in an external div. Please note, the links are dynamic, because the images showing in the jCarsouel are always changing.

How could I get the dynamic re-directing links?

Thank you very much for your help.

[sam9461]

Could anyone help please? Thanks.

[devnull69]

Maybe no one is able to help you because your question is not easy to understand

You want to show a list of links (you mean the content of the href attribute?) in a DIV? Under which condition (onload of the page, on click of another element etc). Why do you want to do that?

[sam9461]

Hi, thank you very much for your quick response.
Let me explain why I want to do it.
In the visible range of my jCarousel, (my jCarousel is in the horizontal dimension), there are five images. They are listed one by one, and there is a blank space between them. This is the normal way that a jCarousel works.
I have 16 images in the jCarousel list, each one has an external link. My jCarousel is in the ‘circular’ mode, and works fine. When I click any one of the images in the visible range, will be redirected to a web page.
Now, my company wants to make the web page look nicer, and hope to put a picture frame over the images, and let each image appear in a small box (like a family put a picture into a frame, please see the screen copy)
Because the frame (have five boxes in a row) is put over the images, I cannot click the redirect links attached to the images. Now, I want to set up hotspots for each of the five small boxes of the frame, and also build up a array variable in javascript/jquery, the redirect links will be manually input into the array, their order absolutely follow the order of the images.
After each click, I just hope to get the index of the image in the first position of the visible range, transfer the index to the array, and get the redirect links for the five visible images, and then transfer the redirect links to the hotspots, so that people can click any of the small-boxes of the frame, and redirected to a web page.

I put my some coding (currently not working) here for your reference, thank you very much for your help.







Coding (I just list 7 images as example)

<script type="text/javascript">
var linkArr=['http://www.yahoo.co.uk', 'http://www.bbc.co.uk/news', 'http://www.bbc.co.uk/weather', 'http://www.tickbox.net', 'http://www.gmail.com', 'http://www.hotmail.com', 'http://www.ebay.co.uk'];

var k1, k;


function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
return idx;
};

function getlink(k){
k1=mycarousel_itemFirstInCallback()-1;
var y = k+k1-1;
return linkArr(y);
}


jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap: 'circular',
itemFirstInCallback: mycarousel_itemFirstInCallback,
});
});

</script>



Hotspots

<div id="piclist"><img name="picframe" src="images/picframe.gif" width="820" height="106" border="0" id="picframe" usemap="#m_picframe" alt="" /><map name="m_picframe" id="m_picframe">
<area shape="rect" coords="663,9,813,97" href="javascript:linkArr(1);" alt="" />
<area shape="rect" coords="499,9,649,97" href="javascript:linkArr(2);" alt="" />
<area shape="rect" coords="335,9,485,97" href="javascript:linkArr(3);" alt="" />
<area shape="rect" coords="171,9,321,97" href="javascript:linkArr(4);" alt="" />
<area shape="rect" coords="7,9,157,97" href="javascript:linkArr(5);" alt="" />
</map>
</div>

[sam9461]

Hi, Devnull69,

Sorry, the screen copy cannot show in the above content.