1

I have used the carousel from Malsup to add a carousel to my webpage. What I would like to do in addition is automatically add the file name of each image to the images fed dynamically to the carousel. I change the images regularly, where the quantity of them can also change. I would be very grateful if someone could suggest a way to add the filename of each image to either the bottom of the image (perhaps superimposed on it) or in the space below the image where an "Alt" name would appear.

Thanks in advance for any help you guys can give.
Cheers, David

The markup is as follows:

    <div id="slideshow" class="pics">
        <img src="sliderimages/ride_4481.jpg" width="400" height="300" /> 
        <img src="sliderimages/ride_4482.jpg" width="400" height="300" />

With CSS styling as follows:

     .pics {
            height: 332px;
            width: 432px;
            padding: 0;
            margin: 10px auto;
            display: block;
            border: 1px solid #ccc;
            border-radius: 8px;
        } 

        .pics img {
            padding: 15px;
            border: 1px solid #ccc;
            background-color: #eee;
            width: 400px;
            height: 300px;
            top: 0;
            left: 0;
            border-radius: 8px;
        }

The script to run the slideshow is (with a lot of comments to serve as reminders:

    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>

    <script type="text/javascript"> 

    $(document).ready(function() { 
        // start slideshow 
        $('#slideshow').cycle({ 
                fx:      'cover',
            easing: 'easeOutBounce',
            pause: 1,
            speed: 1000,
                timeout:  1500,
            before:   onBefore 
        }); 

        var slidesAdded = false; 

        function onBefore(curr, next, opts) { 
            // Make sure not to call addSlide before it is defined 
            if (!opts.addSlide || slidesAdded) 
                return; 
            // Add slides for images 3 - 8 or whatever number of slides you want to add. Just amend the var i=3; < x; i++ functions below where x is any number.
            // Also ensure you have this number of pictures available or you will get grey placeholders instead!
                // Slides can be a DOM element, a jQuery object, or a string 
             for (var i=3; i < 3; i++) 
             opts.addSlide('<img src="sliderimages/ride_448'+i+'.jpg" width="400" height="300" />');
            slidesAdded = true; 
        }; 
    });

</script>
4

2 回答 2

1

You need to use the after: event to set the function to replace your caption text. The following code is taken from http://jquery.malsup.com/cycle/caption.html

$('#slideshow').cycle({
    fx:       'fadeZoom',
    timeout:   2000,
    after:     function() {
        var name = this.src.split('/');
        $('#caption').html(name[name.length-1]);
    }
});

Working Demo

I'm not entirely sure what the rest of your JavaScript is doing. Why are you adding images on the before event of the carousel?

If you want to make the image alt the filename then use this code:

$('#slideshow img').each(function( index ) {
    var name = this.src.split('/');
    this.alt = name[name.length-1];
});

$('#slideshow').cycle({
    fx:       'fadeZoom',
    timeout:   2000,
    after:     function() {
        //use the alt tag of the image, which we previously set to the filename above
        $('#caption').html(this.alt);
    }
});

Working Demo

I am taking a guess that the JavaScript onBefore function is adding images to your slider, I'm not sure why though because you can just define the images in your html markup to begin with. If for some reason that is the case (maybe you request the images via ajax first). I've added a working demo of that too.

EDIT

Seeing as the other question got closed so abruptly...

In order to set up different image sets, there's 2 ways to do it. It's all a matter of setting up the array, or preferably an of JSON describing your image sets or (best) lazy loading the data via an Ajax request on selection of image set. I've already shown you the basic array set up.

Using JSON you could either define all your rides - http://jsfiddle.net/f9g5G/10/:

var pictures = {
    ride_443: { 
        ride: 443,
        linkText: "443",
        images: [
            "images/medium/ride_443%20(1).jpg",
            "images/medium/ride_443%20(2).jpg",
            "images/medium/ride_443%20(3).jpg",
            "images/medium/ride_443%20(4).jpg",
            "images/medium/ride_443%20(5).jpg"
        ]
    },
    ride_425: { 
        ride: 425,
        linkText: "443",
        images: [
            "images/medium/ride_425%20(1).jpg",
            "images/medium/ride_425%20(2).jpg"
        ]
    },
    ride_plentong2013: { 
        ride: "plentong2013",
        linkText: "Plentong 2013",
        images: [
            "images/medium/plentong1.jpg",
            "images/medium/plentong2.jpg",
            "images/medium/plentong3.jpg"
        ]
    }
}

Or you could load them using AJAX. I'll use the existing XML points as an example, but note that due to Same Origin Policy I have had to simulate the AJAX call, I put comments in so let me know if you have questions. I have made the assumption that the anchor links for the markup will be generated from server code and not jQuery this time, to match the layout you currently have on the page and group them by year.

http://jsfiddle.net/QzbZ7/

var getSliderData = function(group) {
    $.ajax({
        url: "/gallery/ride_" + group + "/resources/group.xml",
        dataType: "xml",
        success: function(data) {
            setUpSliders($(data), group);
        }
    });
};

//create the slider
var setUpSliders = function($data, group) {

    var imgBase = "/gallery/ride_" + group + "/resources/";

    $description.html($data.find("galleryDescription").text());

    $data.find("mediaGroup > media > item").each(function() {
        var $this = $(this);
        $slideshow.append( 
            $('<img>', { 
                src: imgBase + $this.find("renditions > rendition[size=medium]").attr("src"), 
                alt: $this.find("title").text()
            })
        )
    });

    //set up the slider
    $slideshow.cycle({
        fx:       'fadeZoom',
        timeout:   2000,
        before:     function() { $caption.hide(); },
        after:     function() { $caption.html(this.alt).fadeIn(); }
    });

};

//set up initial slider:
var initialSlider = 443;
getSliderData(initialSlider);
于 2013-05-30T04:22:12.840 回答
0

how about this for html:

<div id="slideshow" class="pics">
    <div id="caption"></div>
    <img src="sliderimages/ride_4481.jpg" width="400" height="300" /> 
    <img src="sliderimages/ride_4482.jpg" width="400" height="300" />

then JS, instead of this:

for (var i=3; i < 3; i++) 
         opts.addSlide('<img src="sliderimages/ride_448'+i+'.jpg" width="400" height="300" />');
        slidesAdded = true;

you can do a much more automatic way

$(".pics img").each(function(){
$(this).attr("alt", $(this).href)
opts.addSlide($(this));
});

then you can add what jammycam suggested

    $('#slideshow').cycle({
    fx:       'fadeZoom',
    timeout:   2000,
    after:     function() {
        $('#caption').html(this.alt);
    }
});
于 2013-05-30T04:50:15.137 回答