PDA

View Full Version : slideshow script



ianhaney
07-23-2012, 07:53 AM
Background Image Carousel

http://www.dynamicdrive.com/dynamicindex14/bgcarousel.htm

I want to be able to put a link in around the image so when click on the image in the slideshow it goes to another page on my website, where would I put the <a href=" ">

The images are in the coding below


carousel
imagearray: [
['images/win7image.png', ''], //["image_path", "optional description"]
['images/adobeimage.png', ''],
['images/office2010image.png', ''],
['images/officemac2010image.png', ''],
['images/outlook2010image.png', '']//<--no trailing comma after very last image element!


Can some one help me please

bernie1227
07-23-2012, 08:38 AM
Have a go at this:


carousel
imagearray: [
['<a href="#">images/win7image.png</a>', ''], //["image_path", "optional description"]
['<a href="#">images/adobeimage.png</a>', ''],
['<a href="#">images/office2010image.png</a>', ''],
['<a href="#">images/officemac2010image.png</a>', ''],
['<a href="#">images/outlook2010image.png</a>', '']//<--no trailing comma after very last image element!

jscheuer1
07-23-2012, 09:53 AM
I doubt that will work because these are background images.

What I would do is, if you're not using the description as it appears you're not, you could just put an a tag in the field for description, like:


['images/adobeimage.png', '<a href="http://www.dynamicdrive.com/"></a>'],

And in the stylesheet add/change as shown:


. . . ctedslide{ /* CSS for currently selected slide */
}

div.slide div.desc{ /* DIV that contains the textual description inside .slide */
position: absolute;
color: white;
left: 0px;
top: 0px;
width:100%;
height: 100%;
padding: 10px;
font: bold 16px sans-serif, Arial;
text-shadow: 0 -1px 1px #8a8a8a; /* CSS3 text shadow */
z-index:5;
}

div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */
}

div.slide div.desc h2{
font-size:150%;
margin:0;
}

div.slide div.desc a{
color:yellow;
text-decoration:none;
}

div.slide a {
display: block;
width: 100%;
height: 100%;
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

ianhaney
07-23-2012, 11:06 AM
Hi Bernie

Unfortunatly your method didn't work but thank you so much for the reply and method to try

Hi jscheuer1

I tried your second method using ['images/adobeimage.png', '<a href="http://www.dynamicdrive.com/"></a>'], and worked perfect

Thank you so much

Thank you to all that replied and helped, really appreciate it

jscheuer1
07-23-2012, 03:34 PM
Great! I've since discovered that my first method didn't really work anyway. Even if it did, which I later figured out how to do, when hovering you wouldn't see the link address in the status bar of browsers that supply that information, and it would be hard to configure for link target or link onclick behaviors. I've since hit on a method that sort of combines it with the one that does work and thereby overcomes those deficiencies while still allowing a separate description. And though it's technically invalid, there appears there can be one or more links in the separate description on images that have this overall link. I think that might be because the browser doesn't have to parse it, it's all added to the DOM after that.

Anyways, here's the scenario -

Styles:


div.bgcarousel{ /* CSS for main carousel container */
background: black url(ajaxload.gif) center center no-repeat; /* loading gif while caoursel is loading */
width:900px; /* default dimensions of carousel */
height:600px;
}

img.navbutton{ /* CSS for the nav buttons */
margin:5px;
opacity:0.7;
}

div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}

div.selectedslide{ /* CSS for currently selected slide */
}

div.slide div.desc{ /* DIV that contains the textual description inside .slide */
position: absolute;
color: white;
left: 40px;
top: 100px;
width:200px;
padding: 10px;
font: bold 16px sans-serif, Arial;
text-shadow: 0 -1px 1px #8a8a8a; /* CSS3 text shadow */
z-index:5;
}

div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */
}

div.slide div.desc h2{
font-size:150%;
margin:0;
}

div.slide div.desc a{
color:yellow;
text-decoration:none;
}

div.slide a.linkinbgcaroulsel { /* Styles for whole image links */
display: block;
width: 100%;
height: 100%;
position: absolute;
text-decoration: none;
}

Script:


var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['autumnpark.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.'], //["image_path", "optional description", "optional link tag"]
['chime.jpg', '', '<a target="_blank" href="http://www.dynamicdrive.com/"></a>'],
['girlportrait.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
['redbench.jpg', 'Alone and Lonliness- <a target="_blank" href="http://www.yahoo.com/">Peace</a> and Inner Struggle', '<a href="http://www.google.com/"></a>'] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})

;(function($){
var carousel = firstbgcarousel, setting = carousel.setting, $slide, $desc, $link, callee = arguments.callee;
if(!carousel.$imageslides){setTimeout(function(){callee($);}, 100); return;}
carousel.$imageslides.each(function(i){
if(setting.imagearray[i][2]){
$slide = $(this);
$desc = $slide.children();
$link = $(setting.imagearray[i][2]).addClass('linkinbgcaroulsel');
if($desc.size()){
$desc.wrap($link);
} else {
$slide.append($link);
}
}
});
})(jQuery);

ianhaney
07-23-2012, 03:43 PM
Hi jscheuer1

I might have to try bit later on today what you just posted, what does it allow

Am I right in saying it allows to have a description and a link as well

jscheuer1
07-23-2012, 04:11 PM
Yes, and it appears that the description can also have a separate link or links even within it.

I tested the code in IE 9 in IE 9, 8, and 7 modes, as well as in Chrome. These are currently the most used browsers (though IE 9 in IE 8 and 7 modes doesn't guarantee compliance in IE 8 and 7, it's a good indicator). I just tested in Opera, it's good in that as well, with a minor layout issue which BTW exists in Opera with the script without this added code. And I just tested in Firefox - good there too. I just now tested in a real IE 8, good there too.

If you have any problems with it, let me know and give me a link to the page. It will probably then be easy to figure out.

One other thing I would suggest though is updating jQuery. This was written to use jQuery 1.7.1 (latest available at that time) - but that was a little buggy. Change:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

to:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

That way it will use the latest version 1.7 code available (1.7.2 last I checked).

ianhaney
07-23-2012, 05:17 PM
Thank you so much

I have just updated the line for the jquery that you posted and is working perfect

Thank you so much, I really appreciate the help, been a massive help

Thank you so much