Get name of active slide image and append values to a link in real time

I have the following simple slider:

<div class="slideshow">
    <img src="[the source]/some.jpg" style="display:none" />
    <img src="[the source]/other.jpg" style="display:block" />

What I want is to follow the slideshow changes in real time. If an image has display:block, will get the image name, some or other in this example. If the image name is some, will append a button's href and id attributes with some values, if the image name is other, will append a button's (link) href and id attributes with some other values.

Tried the thing below, but that is unuseful. It is not real time. The slides are changing in a 5 seconds interval, this changes interval should be applied also on the link button href and id values.

jQuery(".slideshow img").each(function(i,val){
        if ($('.slideshow img').is(':visible')) {
            var name = $(".slideshow img").attr('src').split('/');
            name = name[name.length-1].split('.')[0];
            if ( name == "oferta" ) {
                $("a.offers").attr("href", "index.php?p=575");
                $("a.offers").attr("id", "of_details");
            } else {
                $("a.offers").attr("href", "index.php?p=572");
                $("a.offers").attr("id", "of_valentine ");

And unfortunately my slider doesn't applies classes to the active slide image, only is toggling the display attribute.

Any ideas?

Thanks in advance!



answered 6 years ago codebyren #1

If you have used a decent jquery slider plugin, it probably supports running a callback function each time a slide changes. This provides a good opportunity to do what you're trying to do. For example, with Nivo Slider, your slideshow might be triggered something like this (untested):

    afterChange: function() {                   
        var images = $('img', '#slider');  // all slideshow images
        var img = images.filter(function() { // find the currently active image
            return ($(this).css('visibility') == 'hidden') ? false : true;
        // Now determine img name and manipulate accordingly

comments powered by Disqus