將圖像滑塊標題更改為靜態
[英]Change Image Slider Caption to Static
問題描述
我有一個名為pgwslidemaster.jquery的jQuery滑塊，我想在div中顯示滑塊標題，可以對其進行更改並為其添加標簽。 但是問題是我看不到滑塊標題，它是在圖像中用alt定義的，但是我不想要它。 有什么方法可以將圖片的標題從Alt更改為單獨的標簽？ 這是我的片段：
$(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>
謝謝
2 個解決方案
解決方案1
0 2016-12-06 08:36:17
將標題移到div中到底需要做什么？ 您要添加一些CSS嗎？ 如果是這種情況，則可以通過將css應用於字幕跨度類.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>
解決方案2
0 2016-12-06 11:14:14
希望這對您有用。 我為每張幻燈片添加了ID，並在標題中添加了帶有鏈接和文本的data屬性，然后將其添加到標題跨度中，並在afterSlide事件中添加了超鏈接。
$(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>
圖像滑塊標題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.