Add Link To Caption in Wow Slider v2.7.1

**Delziman** · 12-17-2012, 08:15 PM

Hi,
Is there any way to add link to caption only, not to the entire image in Wow slider 2.7.1?
Since my website is not online yet (I'm working on localhost), I can only post the index page and it's related files.
Your assistance will be highly appreciated.

Thanks

0. Image

Click image for larger version.

Name: Image-1.jpg
Views: 362
Size: 62.6 KB
ID: 4849

1. index.html

Code:

<head>
	<title>Project</title>
	<link rel="stylesheet" type="text/css" href="engine1/style.css" />
	<script type="text/javascript" src="engine1/jquery.js"></script>
	
</head>
<body>
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
<li><img src="data1/images/share_your_moments.jpg" alt="Image 1" title="Image 1" id="wows1_0"/>Caption 1</li>
<li><img src="data1/images/cross_over_mountains.jpg" alt="Image 2" title="Image 2" id="wows1_1"/>Caption 2</li>
<li><img src="data1/images/enjoy_our_community.jpg" alt="Image 3" title="Image 3" id="wows1_2"/>Caption 3</li>
<li><img src="data1/images/look_beyond_the_limit.jpg" alt="Image 4" title="Image 4" id="wows1_3"/>Caption 4</li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Image 1">1</a>
<a href="#" title="Image 2">2</a>
<a href="#" title="Image 3">3</a>
<a href="#" title="Image 4">4</a>
</div></div>

	<a href="#" class="ws_frame"></a>
	<div class="ws_shadow"></div>
	</div>
	<script type="text/javascript" src="engine1/wowslider.js"></script>
	<script type="text/javascript" src="engine1/script.js"></script>
	
</body>
</html>

2. Style Sheet

Code:

#wowslider-container1 { 
	zoom: 1; 
	position: relative; 
	max-width:980px;
	margin:10px auto 78px;
	z-index:100;
	border:none;
	text-align:left; /* reset align=center */
}
* html #wowslider-container1{ width:980px }
#wowslider-container1 .ws_images ul{
	position:relative;
	width: 10000%; 
	height:auto;
	left:0;
	list-style:none;
	margin:0;
	padding:0;
	border-spacing:0;
	overflow: visible;
	/*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
	width:1%;
	line-height:0; /*opera*/
	float:left;
	font-size:0;
	padding:0 0 0 0 !important;
	margin:0 0 0 0 !important;
}

#wowslider-container1 .ws_images{
	position: relative;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
#wowslider-container1 .ws_images a{
	width:100%;
	display:block;
	color:transparent;
}
#wowslider-container1 img{
	max-width: none !important;
}
#wowslider-container1 .ws_images img{
	width:100%;
	border:none 0;
	max-width: none;
}
#wowslider-container1 a{ 
	text-decoration: none; 
	outline: none; 
	border: none; 
}

#wowslider-container1  .ws_bullets { 
	font-size: 0px; 
	float: left;
	position:absolute;
	z-index:70;
}
#wowslider-container1  .ws_bullets div{
	position:relative;
	float:left;
}
#wowslider-container1  a.wsl{
	display:none;
}
#wowslider-container1 .ws_frame{
	display:block;
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	border:solid 8px black;
	z-index:9;
	opacity:0.3;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}
* html #wowslider-container1 .ws_frame{
	width:$FrameW$px;
	height:$FrameH$px;
}
#wowslider-container1  .ws_bullets { 
	padding: 10px; 
}
#wowslider-container1 .ws_bullets a { 
	margin: 0;
	width:16px;
	height:15px;
	background: url(./bullet.png) left top;
	float: left; 
	text-indent: -4000px; 
	position:relative;
	color:transparent;
}
#wowslider-container1 .ws_bullets a:hover{ 
	background-position: -16px 0;
}
#wowslider-container1 .ws_bullets a.ws_selbull{
	background-position: right top;
}
#wowslider-container1 .ws_bullets a.ws_overbull{
	background-position: 50% top;
}
#wowslider-container1 .ws_bullets a:hover{
	background-position: 50% top;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
	position:absolute;
	display:block;
	top:50%;
	margin-top:-28px;
	z-index:60;
	height: 56px;
	width: 29px;
	background-image: url(./arrows.png);
}
#wowslider-container1 a.ws_next{
	background-position: 100% 0; 
	right:-29px;
}
#wowslider-container1 a.ws_prev {
	left:-29px;
	background-position: 0 0; 
}
/* bottom center */
#wowslider-container1  .ws_bullets {
    top: 5px;
    right: 10px;
}
#wowslider-container1 .ws_bullets .ws_bulframe {
	top: 20px;
}
#wowslider-container1 .ws_bullets .ws_bulframe {
	top: 20px;
}
#wowslider-container1 .ws-title{
	position: absolute;
	bottom:18px;
	left: 18px;
	margin-right:23px;
	z-index: 50;
	color: #FFF;
    font-family: Tahoma,Arial,Helvetica;
	font-size: 14px;
}
#wowslider-container1 .ws-title div,#wowslider-container1 .ws-title span{
	display:inline-block;
	padding:5px;
	background:#000;
	opacity:0.6;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);	
}
#wowslider-container1 .ws-title div{
	display:block;
	margin-top:5px;
	font-size: 12px;
}
#wowslider-container1 .ws_images ul{
	animation: wsBasic 29.6s infinite;
	-moz-animation: wsBasic 29.6s infinite;
	-webkit-animation: wsBasic 29.6s infinite;
}
@keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} }
@-moz-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} }

#wowslider-container1  .ws_shadow{
	background-image: url(./bg.png);
	background-repeat: no-repeat;
	background-size:100%;
	position:absolute;
	z-index: -1;
	left:-0.51%;
	top:-1%;
	width:101.02%;
	height:108.8%;
}

* html #wowslider-container1 .ws_shadow{/*ie6*/
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine1/bg.png', sizingMethod='scale');
}
*+html #wowslider-container1 .ws_shadow{/*ie7*/
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='engine1/bg.png', sizingMethod='scale');
}
#wowslider-container1 .ws_bullets  a img{
	text-indent:0;
	display:block;
	top:15px;
	left:-47px;
	visibility:hidden;
	position:absolute;
    -moz-box-shadow: 0 0 5px #999999;
    box-shadow: 0 0 5px #999999;
    border: 5px solid #FFFFFF;
	max-width:none;
}
#wowslider-container1 .ws_bullets a:hover img{
	visibility:visible;
}

#wowslider-container1 .ws_bulframe div div{
	height:48px;
	overflow:visible;
	position:relative;
}
#wowslider-container1 .ws_bulframe div {
	left:0;
	overflow:hidden;
	position:relative;
	width:94px;
	background-color:#FFFFFF;
}
#wowslider-container1  .ws_bullets .ws_bulframe{
	display:none;
	overflow:visible;
	position:absolute;
	cursor:pointer;
    -moz-box-shadow: 0 0 5px #999999;
    box-shadow: 0 0 5px #999999;
    border: 5px solid #FFFFFF;
}
#wowslider-container1 .ws_bulframe span{
	display:block;
	position:absolute;
	top:-11px;
	margin-left:-5px;
	left:47px;
	background:url(./triangle.png);
	width:15px;
	height:6px;
}

3. script.js

Code:

function ws_kenburns(c,j,k){var d=jQuery;var e=document.createElement("canvas").getContext;var m=c.paths||[{from:[0,0,1],to:[0,0,1.2]},{from:[0,0,1.2],to:[0,0,1]},{from:[1,0,1],to:[1,0,1.2]},{from:[0,1,1.2],to:[0,1,1]},{from:[1,1,1],to:[1,1,1.2]},{from:[0,0,1.2],to:[1,0,1.2]},{from:[0,1,1.2],to:[1,1,1.2]},{from:[1,0,1.2],to:[1,1,1.2]},{from:[0,0,1.2],to:[0,1,1.2]},{from:[1,0,1.2],to:[0,1,1.2]},{from:[0.5,1,1],to:[0.5,1,1.3]},{from:[1,0.5,1.2],to:[1,0.5,1]},{from:[1,0.5,1],to:[1,0.5,1.2]},{from:[0,0.5,1.2],to:[0,0.5,1]},{from:[1,0.5,1.2],to:[1,0.5,1]},{from:[0.5,0.5,1],to:[0.5,0.5,1.2]},{from:[0.5,0.5,1.3],to:[0.5,0.5,1]},{from:[0.5,1,1],to:[0.5,0,1.15]}];function a(h){return m[h?Math.floor(Math.random()*(e?m.length:Math.min(10,m.length))):0]}function l(x,u){var w,h=0,t=40/u;var y=setInterval(function(){if(h<1){if(!w){w=1;x(h);w=0}h+=t}else{v(1)}},40);function v(z){clearInterval(y);if(z){x(1)}}return{stop:v}}var i=c.width,o=c.height;var n;var f;if(e){var b=d('<canvas width="'+i+'" height="'+o+'"/>');b.css({"z-index":8,position:"absolute",left:0,top:0,width:"100%",height:"100%"}).appendTo(k);n=b.get(0).getContext("2d")}else{var b=d('<div style="width:100%;height:100%"></div>');b.css({"z-index":8,position:"absolute",left:0,top:0}).appendTo(k);var g=[d('<img src="'+j.get(c.startSlide)+'"/>').css({position:"absolute","z-index":1}).appendTo(b)];g[1]=g[0].clone().appendTo(b).hide();var s=0}function r(v,t,h){var u={width:100*v[2]+"%"};u[t?"right":"left"]=-100*(v[2]-1)*(t?(1-v[0]):v[0])+"%";u[h?"bottom":"top"]=-100*(v[2]-1)*(h?(1-v[1]):v[1])+"%";return u}var q;function p(h,v,t){if(n){if(f){f.stop()}f=l(function(w){var x=[v.from[0]*(1-w)+w*v.to[0],v.from[1]*(1-w)+w*v.to[1],v.from[2]*(1-w)+w*v.to[2]];n.globalAlpha=(t?Math.min(w*(1+c.delay/c.duration),1):1);n.drawImage(h,-i*(x[2]-1)*x[0],-o*(x[2]-1)*x[1],i*x[2],o*x[2])},c.duration+c.delay);q=0}else{if(t){g[s].css({"z-index":1}).fadeOut(c.duration);s=s?0:1}var u=g[s].stop(1,1).attr("src",h.src).css({"z-index":2,left:"auto",right:"auto",top:"auto",bottom:"auto"}).css(r(v.from,v.from[0]>0.5,v.from[1]>0.5)).animate(r(v.to,v.from[0]>0.5,v.from[1]>0.5),{easing:"linear",queue:false,duration:(1.5*c.duration+c.delay)});if(t){u.fadeIn(c.duration,function(){q=0})}else{q=0}}}j.each(function(h){d(this).css({visibility:"hidden"});if(h==c.startSlide){p(this,a(0),0)}});this.go=function(h,t){if(q){return -1}q=1;p(j.get(h),a(h),1);return h}};// --------------------------------------------------------------------
//***
jQuery("#wowslider-container1").wowSlider({effect:"kenburns",prev:"",next:"",duration:37*100,delay:37*100,width:980,height:500,autoPlay:true,stopOnHover:true,loop:false,bullets:true,caption:true,captionEffect:"move",controls:false,logo:"engine1/loading.gif",onBeforeStep:0,images:0});

4. wowslider.js

**jscheuer1** · 12-22-2012, 06:47 AM

Have you tried the obvious:

Code:

<li><img src="data1/images/share_your_moments.jpg" alt="Image 1" title="Image 1" id="wows1_0"/><a href="whatever.htm">Caption 1</a></li>

?

**Delziman** · 12-22-2012, 08:32 PM

Thanks for your reply. I just realised that I didn't really ask what I'm looking for. I want all the caption div to be clickable. Obviously, I did try that but it only works when you click on the text; if you click elsewhere in the caption it doesn't work, even if the cursor is set to pointer. I read your wonderful posts on wow slider.

**Beverleyh** · 12-22-2012, 09:07 PM

I can't tell for sure as I'm on iPhone (not too familiar with wow slider anyway) but what if you give the anchor/link tag (suggested by John) a style of "display:block" or "display:inline-block"? Does that give the effect you want?

**Beverleyh** · 12-22-2012, 09:33 PM

Sorry - just reviewing my previous post while looking at the wow slider markup. From the code you posted, there is no caption div - each entry falls inside of a list item (<li>). John's additional anchor tag would be the most logical solution to your problem.

So, what exactly do you mean when you say you want to make the whole of the caption div clickable?
You could make the whole of the list item clickable but that would then include the image too. John's anchor tag isolates the text only which seems to be what you asked for originally.

FYI - styling the cursor as a pointer has no bearing on the behaviour of the link (or anything else). It's just a cosmetic thing that affects the look of the cursor.

**jscheuer1** · 12-23-2012, 03:38 AM

Well, in a typical Wow Slider, the text in there:

Code:

<li><img src="data1/images/share_your_moments.jpg" alt="Image 1" title="Image 1" id="wows1_0"/>Caption 1</li>

generates markup like so in the slider:

Code:

<div class="ws-title" style="display: block;">
  <span>Image 1</span>
  <div>Caption 1</div>
</div>

So if you were to link it and that (as you say) sort of works, this:

Code:

<li><img src="data1/images/share_your_moments.jpg" alt="Image 1" title="Image 1" id="wows1_0"/><a href="whatever.htm">Caption 1</a></li>

should be generating this markup in the slider:

Code:

<div class="ws-title" style="display: block;">
  <span>Image 1</span>
  <div><a href="whatever.htm">Caption 1</a></div>
</div>

So, in the stylesheet you could put:

Code:

.ws-title div {cursor: pointer;}

And somewhere after the external script tag for jQuery (the slider uses jQuery):

Code:

<script type="text/javascript">
;(function($){
	$('.ws-title div').live('click', function(){
		window.location.href = $(this).find('a').attr('href');
	});
})(jQuery);
</script>

Now the entire div within the ws-title div should be clickable and have the link cursor.

If you prefer, you could include (link) the title (Image 1) as well. In that case use this style instead:

Code:

.ws-title span, .ws-title div {cursor: pointer;}

And this javascript code:

Code:

<script type="text/javascript">
;(function($){
	$('.ws-title span, .ws-title div').live('click', function(){
		window.location.href = $(this).parent().find('a').attr('href');
	});
})(jQuery);
</script>