Results 1 to 8 of 8

Thread: Add Link To Caption in Wow Slider v2.7.1

  1. #1
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Add Link To Caption in Wow Slider v2.7.1

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    ?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. #8
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot jscheuer1, it works. Have a great day.

Similar Threads

  1. Lightbox - add link inside caption
    By katebellami in forum Dynamic Drive scripts help
    Replies: 25
    Last Post: 12-07-2012, 05:25 PM
  2. Slimbox or Lightbox Caption Link
    By GlennR in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-19-2012, 10:59 PM
  3. Lightbox Pop Up Caption Link
    By CarolD in forum Looking for such a script or service
    Replies: 3
    Last Post: 03-06-2009, 05:56 PM
  4. Lightbox Caption Link without Upgrading...
    By witchyweb in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-13-2008, 12:33 AM
  5. Image Thumbnail Viewer II - Caption or Link
    By buvwon in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-04-2006, 02:16 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •