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