PDA

View Full Version : 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
4849

1. index.html



<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


#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


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:


<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:


<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:


<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:


<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:


<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:


.ws-title div {cursor: pointer;}

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


<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:


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

And this javascript 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>

Beverleyh
12-23-2012, 06:29 AM
Ah, I see. I wondered where the div came into things - it makes much more sense now (auto-generation).

Thanks for explaining with the breakdown John :)

Delziman
12-23-2012, 06:38 PM
Thanks a lot jscheuer1, it works. Have a great day.