How to add the title of an image in a JQuery serialScroll plugin gallery within paragraph tags?

Question

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>

Try to indent the code lines, it would be much easier to understand. — Endre Simo, Sep 17 '12 at 06:35

Salketer · Accepted Answer · 2012-09-17T07:39:02.530

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);
        }
    });
});

Thanks for the very prompt reply. I tried doing it that way but it seems to stop the entire script from working at all. I'm not sure what is breaking it. — Peter Ahrens, Sep 17 '12 at 06:54
Sorry there was a mistake in my code, corrected now. Please tell me what's the error you are getting. — Salketer, Sep 17 '12 at 06:56
Brilliant! That works very well expect for one thing. The first image doesn't show the title, it only appears after the first image change. Sorry, I'm not very good with JQuery. — Peter Ahrens, Sep 17 '12 at 07:09
Well, run the 4 lines in the onBefore function before starting it. with var pos = 0 — Salketer, Sep 17 '12 at 07:11
Do I add that after the 4 lines? I've tried a few places and it doesn't seem to work for me. — Peter Ahrens, Sep 17 '12 at 07:37
Thank you so very much, this is a huge help. I've been trying to learn JQuery as much as possible for the little I have needed it and I didn't think I was ever going to get this to work. Once again thanks! — Peter Ahrens, Sep 17 '12 at 07:41

How to add the title of an image in a JQuery serialScroll plugin gallery within paragraph tags?

1 Answers1