Making the Image Carousel Responsive... Adding a caption

[jas...@upsetgames.com]

I'm trying to make the image carousel clickable so that it can be used as a link based off what image is currently viewed. I'd also like to add a caption to it, however I could get over not having a caption...

[Google Web Designer beta]

Hi,

Currently, all gallery components in GWD triggers a frame tap event. The event comes with a field id which is the index of the current frame. Note that the id is 1-based so the first frame has the id of 1 instead of 0 just like  the input for goToFrame method. So, you can create a custom event handler that would select different URL to go to based on that id. Note that in the case of a DoubleClick creative, you should add these URLs as exits and call the exit method for proper tracking.

As to captions, gallery components in GWD are quite extensible and you can directly inline the content of each frame inside a gallery in code view.

Suppose you have a gallery that shows three images:

<gwd-carouselgallery images="i1.png,i2.gif,i3.jpg>

</gwd-carouselgallery>

It is equivalent to:

<gwd-carouselgallery>

  <img src="i1.png">

  <img src="i2.gif">

  <img src="i3.jpg">

</gwd-carouselgallery>

Each child element of the gallery component will be used as a frame in the gallery. So, to add caption, simply wrap the image and the text in a div:

<gwd-carouselgallery>

  <div id=f1>

    <img src="i1.png">

    <div id="c1" class="caption">Caption 1</div>

  </div>

  <div id=f2>

    <img src="i2.gif">

    <div id="c2" class="caption">Caption 2</div>

  </div>

  <div id=f3>

    <img src="i3.jpg">

    <div id="c3" class="caption">Caption 3</div>

  </div>

</gwd-carouselgallery>

You can style the frames using css:

#f1 {

  background: ...

  border-radius: ...  

}

#f1 > img {

  top: ...

  left: ...

  width: ...

  height: ...

}

#c1 {

  ...

}

.caption {

  ...

}

A trick for doing that easily in GWD is to create a page with the desired size of the frame. Start with a div covering the entire page (like the div with id f1 above) and add images, text and components into the div as you like. When you are done, copy and paste the div under the gallery.

Hope this helps.

Paul