更改圖像滑塊標題爲靜態

我有一個名爲pgwslidemaster.i的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>

感謝

來源

2016-12-06 inaz

請重新表述你的問題。它對我來說不清楚。 – Satpal

我想在div中顯示圖像的標題。 – inaz

'div'在哪裏？ – Satpal

正是你必須通過移動標題到一些格呢？你想添加一些CSS嗎？如果是這種情況，那麼你可以通過將CSS應用於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>

來源

2016-12-06 08:36:17 WebSwami

它不適用於Css。我想把標題放在< a href="">標記中。在標題中更多地放置了一些圖標。 – inaz

在這種情況下，您可以使用pgwSlideshow中的afterSlide選項並編寫代碼以在標題中顯示自定義元素。 – WebSwami

嗨@inaz這是爲你工作？我也發佈了另一個實現相同概念的答案。 – WebSwami

希望這會爲你工作。我已經爲每個幻燈片添加了id，並添加了數據屬性以及您想要的標題中的鏈接和文本，然後將其附加到afterSlide事件上的超鏈接的標題範圍中。

$(document).ready(function() { 
 
    $('.pgwSlideshow').pgwSlideshow({ 
 
     autoSlide: true, 
 
afterSlide: function(id) { 
 
     \t $('.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> 
 
\t </ul> 
 
</div>

來源

2016-12-06 11:14:14 WebSwami

更改圖像滑塊標題爲靜態

回答

相關問題