How to add the title of an image in a JQuery serialScroll plugin gallery within paragraph tags?
-
02-07-2021 - |
Frage
I am using the Jquery serialScroll plugin and have made a horizontal gallery which adds a .active class to the the current image. What I would also like to do is get the title of the current image and display it on the page within paragraph tags.
My HTML:
<p class="title"></p>
<div id="slideshow">
<ul>
<li><img src="www.website.com/1.jpg title="title 1" /></li>
<li><img src="www.website.com/2.jpg title="title 2" /></li>
<li><img src="www.website.com/3.jpg title="title 3" /></li>
<li><img src="www.website.com/4.jpg title="title 4" /></li>
</ul>
</div>
My Javacript:
// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};
jQuery(function ($) {
var $nav = $('#slideshow li');
$('#slideshow').serialScroll({
items: 'li',
prev: '.prev',
next: '.next',
offset: 0, //when scrolling to photo, stop 230 before reaching it (from the left)
start: 0, //as we are centering it, start at the 2nd
duration: 1000,
force: false,
stop: true,
constant: false,
lock: false,
cycle: false, //don't pull back once you reach the end
easing: 'easeOutQuart', //use this easing equation for a funny effect
jump: true, //click on the images to scroll to them
navigation: $nav,
onBefore: function (e, el, $p, $i, pos) {
$nav.removeClass('newclass');
$nav.eq(pos).addClass('newclass')
},
});
});
I figure I need to somehow add this Javascript to get the title:
<script>
var title = $("li.newclass img").attr("title");
$("p.title").text(title);
</script>
Lösung
First correct your html and add the ending quotes and correct the href part like so:
<p class="title"></p>
<div id="slideshow">
<ul>
<li><img src="http://www.website.com/1.jpg" title="title 1" /></li>
<li><img src="http://www.website.com/2.jpg" title="title 2" /></li>
<li><img src="http://www.website.com/3.jpg" title="title 3" /></li>
<li><img src="http://www.website.com/4.jpg" title="title 4" /></li>
</ul>
</div>
To make the text in the P the same as the title of the picture, use the same function as where you change the class... Like so:
// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
jQuery(function( $ ){
var $nav = $('#slideshow li');
var pos = 0;
$nav.removeClass('newclass');
$nav.eq(pos).addClass('newclass')
var title = $("li.newclass img").attr("title");
$("p.title").text(title);
$('#slideshow').serialScroll({
items:'li',
prev:'.prev',
next:'.next',
offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
start:0, //as we are centering it, start at the 2nd
duration:1000,
force:false,
stop:true,
constant:false,
lock:false,
cycle:false, //don't pull back once you reach the end
easing:'easeOutQuart', //use this easing equation for a funny effect
jump: true, //click on the images to scroll to them
navigation:$nav,
onBefore:function(e,el,$p,$i,pos){
$nav.removeClass('newclass');
$nav.eq(pos).addClass('newclass')
var title = $("li.newclass img").attr("title");
$("p.title").text(title);
}
});
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow