PDA

View Full Version : How to hyperlink pictures in Background Image Carousel



Jamcan
03-16-2012, 10:14 PM
1) Script Title:

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/bgcarousel.htm


3) Describe problem: how do I hyperlink the picture in the slide show?


<script type="text/javascript">

var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['Youth/images/gnow_slide1.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.'], //["image_path", "optional description"]
['Youth/images/gnow_slide2.jpg', '<h2>Wind Chime</h2>The bellweather of the sky, the chime speaks of impending turmoil.'],
['Youth/images/gnow_slide3.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
['Youth/images/gnow_slide4.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:4, stoponclick:false, pauseonmouseover:true},
navbuttons: ['images/left.gif', 'images/right.gif', 'images/up.gif', 'images/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)
})

</script>

Thanks

vwphillips
03-17-2012, 02:36 PM
function bgCarousel(options){
var $=jQuery;
if (options.linkimage){
var obj=document.getElementById(options.wrapperid),a=document.createElement('A'),img=document.createElement('IMG');
img.src=options.linkimage;
img.style.position='absolute';
img.style.zIndex='1';
img.style.left='0px';
img.style.top='0px';
img.style.width='100%';
img.style.height='100%';
img.style.borderWidth='0px';
a.appendChild(img);
options.link=a;
options.obj=obj;
}
this.setting={displaymode:{type:'auto', pause:2000, stoponclick:false, cycles:2, pauseonmouseover:true}, activeslideclass:'selectedslide', orientation:'h', persist:true, slideduration:500} //default settings
jQuery.extend(this.setting, options) //merge default settings with options
this.setting.displaymode.pause+=400+this.setting.slideduration // 400ms is default fade in time
var curslide=(this.setting.persist)? bgCarousel.routines.getCookie("slider-"+this.setting.wrapperid) : 0
this.curslide=(curslide==null || curslide>this.setting.imagearray.length-1)? 0 : parseInt(curslide) //make sure curslide index is within bounds
this.curstep=0
this.animation_isrunning=false //variable to indicate whether an image is currently being slided in
this.posprop=(this.setting.orientation=="h")? "left" : "top"
options=null
var slideshow=this, setting=this.setting, preloadimages=[], imagesloaded=0, slidesHTML='';

for (var i=0, max=setting.imagearray.length; i<max; i++){ //preload images
preloadimages[i]=new Image()
$(preloadimages[i]).bind('load error', function(){
imagesloaded++
if (imagesloaded==max){ //when all images have preloaded
$(function(){ //on document.ready
slideshow.init($, slidesHTML);
})
}
})
preloadimages[i].src=setting.imagearray[i][0]
slidesHTML+=bgCarousel.routines.getSlideHTML(setting, setting.imagearray[i], '100%', '100%', this.posprop)+'\n'
}
$(window).bind('unload', function(){ //on window onload
if (slideshow.setting.persist) //remember last shown slide's index?
bgCarousel.routines.setCookie("slider-"+setting.wrapperid, slideshow.curslide)
})
}




slide:function(nextslide, dir){ //possible values for dir: "left", "right", "top", or "down"
this.link(nextslide)
if (this.curslide==nextslide)
return
var slider=this, setting=this.setting
var createobj=bgCarousel.routines.createobj
var nextslide_initialpos=setting.dimensions[(dir=="right"||dir=="left")? 0 : 1] * ((dir=="right"||dir=="down")? -1 : 1)
var curslide_finalpos=-nextslide_initialpos
var posprop=this.posprop
if (this.animation_isrunning!=null)
this.animation_isrunning=true //indicate animation is running
this.$imageslides.eq(nextslide).show().css(createobj([posprop, nextslide_initialpos], ['opacity', 0.5])) //show upcoming slide
.stop().animate(createobj([posprop, 0]), setting.slideduration, function(){
var $this=jQuery(this)
$this.addClass(setting.activeslideclass).animate({opacity:1})
.find('div.desc').stop().slideDown()
slider.animation_isrunning=false
})
.find('div.desc').hide()

this.$imageslides.eq(this.curslide)
.removeClass(setting.activeslideclass)
.stop().animate(createobj([posprop, curslide_finalpos]), setting.slideduration, function(){
var $this=jQuery(this)
$this.hide()
}) //hide outgoing slide

this.curslide=nextslide
},

link:function(nu){ //keyword: "back" or "forth"
var slideshow=this,s=this.setting
if (s.link){
s.link.removeAttribute('href');
if (s.imagearray[nu][2]){
s.link.href=s.imagearray[nu][2];
}
}
},





init:function($, slidesHTML){
var slideshow=this, setting=this.setting
this.$wrapperdiv=$('#'+setting.wrapperid)
setting.dimensions=[this.$wrapperdiv.width(), this.$wrapperdiv.height()]
this.$wrapperdiv.css({position:'relative', visibility:'visible', overflow:'hidden', backgroundImage:'none', width:setting.dimensions[0], height:setting.dimensions[1]}) //main DIV
if (this.$wrapperdiv.length==0){ //if no wrapper DIV found
alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
return
}
this.$wrapperdiv.html(slidesHTML)
this.$imageslides=this.$wrapperdiv.find('div.slide').hide()
this.$imageslides.eq(this.curslide).show()
.css(bgCarousel.routines.createobj(['opacity', 0.5], [this.posprop, 0])) //set current slide's CSS position (either "left" or "top") to 0
.addClass(setting.activeslideclass)
.stop().animate({opacity:1})
.find('div.desc').slideDown()
var orientation=setting.orientation
var controlpaths=(orientation=="h")? setting.navbuttons.slice(0, 2) : setting.navbuttons.slice(2)
var $controls = $('<img class="navbutton" src="'+controlpaths[1]+'" data-dir="forth" style="position:absolute; z-index:5; cursor:pointer; ' + (orientation=='v'? 'bottom:0; left:46%' : 'top:46%; right:0;') + '" />'
+ '<img class="navbutton" src="'+controlpaths[0]+'" data-dir="back" style="position:absolute; z-index:5; cursor:pointer; ' + (orientation=='v'? 'top:0; left:45%' : 'top:45%; left:0;') + '" />'
)
.click(function(){
var keyword = this.getAttribute('data-dir')
setting.curslide = (keyword == "right")? (setting.curslide == setting.content.length-1? 0 : setting.curslide + 1)
: (setting.curslide == 0? setting.content.length-1 : setting.curslide - 1)
slideshow.navigate(keyword)
})
$controls.appendTo(this.$wrapperdiv)
if (setting.displaymode.type=="auto"){ //auto slide mode?
setting.displaymode.pause+=setting.slideduration
this.maxsteps=setting.displaymode.cycles * this.$imageslides.length
if (setting.displaymode.pauseonmouseover){
this.$wrapperdiv.mouseenter(function(){slideshow.ismouseover=true})
this.$wrapperdiv.mouseleave(function(){slideshow.ismouseover=false})
}
this.rotatetimer=setTimeout(function(){slideshow.rotate()}, setting.displaymode.pause)
}
if (setting.link){
setting.obj.appendChild(setting.link);
this.link(this.curslide);
}
}




var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
linkimage:'http://www.vicsjavascripts.org.uk/StdImages/Blank.gif', // a blank image is required to apply links
imagearray: [
// //["image_path", "optional description", "image link"]
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.','http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg', '<h2>Wind Chime</h2>The bellweather of the sky, the chime speaks of impending turmoil.'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--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: false, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})

[/COLOR]

therick
03-27-2012, 04:32 PM
Tried it and it didnt work :o


it's not linking my images/slides at all :o

my plan is to link images.. and when you click it opens the page where it linked it to.

Jamcan
03-27-2012, 09:00 PM
Still not linking with the changes made in red.

Can someone help please.

http://www.bcfchurch.net/GNow.html

vwphillips
03-28-2012, 09:10 AM
see attached

JeffSinNHUSA
05-03-2012, 12:31 PM
I tried the code changes (in red) without success. I was unable to open zip file so am not sure if this has been resolved or not.

JeffSinNHUSA
05-03-2012, 06:32 PM
Fixed here: http://www.dynamicdrive.com/forums/showthread.php?p=273842&posted=1#post273842