stackoom
  简体   繁体   中英

Change Image Slider Caption to Static

 原文  2016-12-06 07:13:31  2   2    javascript/ jquery/ html/ css

Question

I have a jquery slider called pgwslidemaster.i want to show the slider caption in a div that can to change it and add a tag to that. but the problem is i can't see the slider caption it is define with alt in image but i don't want it. is there any way to change caption of image from Alt to a separate tag? here is my Snippet : 

 $(document).ready(function() { $('.pgwSlideshow').pgwSlideshow({ autoSlide: true }); }); 
 .slides { width: 700px; margin: 0 auto; } .slides ul { list-style: inside none disc; margin: 0; padding: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.js'></script> <link rel='stylesheet' href='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.css'> </head> <body> <div class="slides"> <ul class="pgwSlideshow"> <li><img src="http://static.pgwjs.com/img/pg/slideshow/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/rio.jpg" alt="Rio de Janeiro, Brazil"></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/london_mini.jpg" alt="" data-large-src="http://static.pgwjs.com/img/pg/slideshow/london.jpg"></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/new-york.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/new-delhi.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/paris.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/sydney.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/tokyo.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/honk-kong.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/dakar.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/toronto.jpg" alt=""></li> <li><a href="http://en.wikipedia.org/wiki/Monaco" target="_blank"><img src="http://static.pgwjs.com/img/pg/slideshow/monaco.jpg" alt="Monaco"></a></li> </ul> </div>

Thanks

2 answers

solution1
 0  2016-12-06 08:36:17

What exactly you have to do by moving caption into some div ? Do you want to add some CSS to it? if that is the case then you can do it by applying css to caption span class .ps-caption. 

 $(document).ready(function() { $('.pgwSlideshow').pgwSlideshow({ autoSlide: true }); }); 
 .slides { width: 700px; margin: 0 auto; } .slides ul { list-style: inside none disc; margin: 0; padding: 0; } .pgwSlideshow .ps-caption { /* Override code here*/ background: rgba(333,0,0,0.5) !important; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.js'></script> <link rel='stylesheet' href='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.css'> </head> <body> <div class="slides"> <ul class="pgwSlideshow"> <li><img src="http://static.pgwjs.com/img/pg/slideshow/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/rio.jpg" alt="Rio de Janeiro, Brazil"></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/london_mini.jpg" alt="" data-large-src="http://static.pgwjs.com/img/pg/slideshow/london.jpg"></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/new-york.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/new-delhi.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/paris.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/sydney.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/tokyo.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/honk-kong.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/dakar.jpg" alt=""></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/toronto.jpg" alt=""></li> <li><a href="http://en.wikipedia.org/wiki/Monaco" target="_blank"><img src="http://static.pgwjs.com/img/pg/slideshow/monaco.jpg" alt="Monaco"></a></li> </ul> </div>

solution2
 0  2016-12-06 11:14:14

Hope this will work for you. I have added id for each slide and added data attribute with link and text you want in caption which is then appended in caption span with hyperlink on afterSlide event. 

 $(document).ready(function() { $('.pgwSlideshow').pgwSlideshow({ autoSlide: true, afterSlide: function(id) { $('.pgwSlideshow .ps-caption').html("<a href='"+ $('#slide-'+id).attr('data-href') +"'>"+ $('#slide-'+id).attr('data-text')+"</a>").show(); } }); }); 
 .slides { width: 700px; margin: 0 auto; } .slides ul { list-style: inside none disc; margin: 0; padding: 0; } .pgwSlideshow .ps-caption { /* Override code here*/ background: rgba(333,0,0,0.5) !important; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.js'></script> <link rel='stylesheet' href='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.css'> </head> <body> <div class="slides"> <ul class="pgwSlideshow"> <li><img src="http://static.pgwjs.com/img/pg/slideshow/san-francisco.jpg" id='slide-1' data-text="Golden Gate Bridge" data-href='http://en.wikipedia.org/wiki/Monaco'></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/rio.jpg" id='slide-2' data-text="Rio" data-href="http://en.wikipedia.org/wiki/Monaco"></li> <li><img src="http://static.pgwjs.com/img/pg/slideshow/london_mini.jpg" data-text="london" id='slide-3' data-href="http://en.wikipedia.org/wiki/Monaco" data-large-src="http://static.pgwjs.com/img/pg/slideshow/london.jpg"></li> <li><a href="http://en.wikipedia.org/wiki/Monaco" target="_blank"><img src="http://static.pgwjs.com/img/pg/slideshow/monaco.jpg" data-text="Monaco" id='slide-4' data-href="http://en.wikipedia.org/wiki/Monaco"></a></li> </ul> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Image slider caption Change caption text of slick slider change image and caption How to display Image caption with Image in slider adding a small image to a image slider caption with bxslider? Display title caption along with image slider Basic Slider: Place caption under image Put image's caption out of slider How to change slider image Javascript image change with slider
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM