How to link individual images in Javascript Slides

2019-09-07 15:37发布

So I am fairly new to javascript. I would like to add a link to each of the images in this slideshow. There are only two images. I have tried to link them like you would with an <a> in html...but that didn't work since it's Javascript. Is there a simple line of code that I could add to link each individual image in a Javascript slideshow to different sites? Thanks so much. Any feedback is much appreciated.

Here is my code. Thanks to help from dynamicdrive.com

var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [1024, 511], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["../Images/slideshow_wakeup.png"],
        ["../Images/slideshow_2.png"]
        <!--["newappvantagemobile.com/images/slideshow_3.png"]-->
         //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 900, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})

1条回答
叼着烟拽天下
2楼-- · 2019-09-07 16:02

From the original documentation of the imagearray array:

["path_to_image", "optional_url", "optional_linktarget", "optional_description"]

So you need to change the imagearray array to this:

imagearray: [
         ["../Images/slideshow_wakeup.png"], "../Images/slideshow_wakeup.png", "_new", "Some text to describe the image."],
        ["../Images/slideshow_2.png", "../Images/slideshow_2.png", "_new", "Some text to describe the image."],
        <!--["newappvantagemobile.com/images/slideshow_3.png"]-->
         //<--no trailing comma after very last image element!
    ],

I'll explain it. The array has 4 elements.

  1. First one is the address of the image (as you know already).
  2. Second one is the link which will be opened when you click on the image.
  3. Third one specifies how the link will be opened. _new means on a new window/tab
  4. The last parameter is the text which will be shown at the bottom of the image.

Hope this helps.

查看更多
登录 后发表回答