Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts

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

    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.

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Could anyone help please? Thanks.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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?

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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>

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi, Devnull69,

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •