Community & Support

Add a frame overlay to a Views Slideshow

I want to have a block on my website that is a views Slideshow. I want all the images to be displayed under this frame http://i.imgur.com/UCAzq.png How would I go about doing that? Can/Should it be done through CSS? Or should I do it another way such as applying the overlaping part of the frame to the pictures as a watermark? I do however want to use these photos on other parts of the site as well without the frame.

Thanks for any help.

Comments

If using an image field you

If using an image field you could use image cache plus imagecache actions which has actions for both underlays and overlays.

That seems like a good

That seems like a good option. Thanks!

If the effect works out I'll document what ever I do for prosperity.

Nec scire fas est omnia (Horace Carmina Liber Quartus 4.22)

overlay affected by views slideshow

Hi, I did this and it worked out great. The only problem is that the views slideshow is affecting the overlay when it fades. I only want the slideshow to fade not the background image. What do I do?

Image Overlay

Copy the file views-slideshow.tpl.php from views_slideshow module in your theme directory.

Add an extra "overlay container" to this new file :

<div id="overlay">&nbsp;</div>
<?php print $slideshow; ?>

Add the CSS (the image is placed with the CSS. It could be integrated in views-slideshow.tpl.php with an Only local images are allowed. tag) :

.view-content{
  position:relative;
}

.view-content #overlay{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:url('../images/overlay.png') no-repeat scroll top left transparent;
  z-index:30; /* the z-index must be higher than the total number of images + 1 in the slideshow. */
}

This answer is more for people who would have the same problem than it is for ColinMctavish. I can imagine you figure something out since November ;-)