CODEWITHSUNDEEP
jqueryjssor
Nicolas Bocquel
Nicolas Bocquel

Reputation: 101

Jssor Slider : Get the name (href) of the CURRENT photo?

with "Jssor Slider", i want to display the name (or the "href") of the current photo in a div. Something like that :

THE HTML :

<div u="slides" ... >
    <!-- All the photos -->
</div>

<div id="photoName_Container"></div>

THE JQUERY

var name = $( ...Current Photo !... ).attr('src');

    $("#photoName_Container").text(name);

How to do that ? Thanks. Nicolas.

Upvotes: 1

Views: 2114

Answers (3)

phenom_aks
phenom_aks

Reputation: 77

Nicolas Bocquel has answered it perfectly. But there is one minor edit (spent a full hour to reach to this. :( ), which may or may not be significant.

$("#container_photos div").each(function(){ // the "div" wrapping the "img"

        var number = $(this).index(); // here the index start from 1 !!
        $(this).children("img[u=image]").attr("id","image_" + number); // so the "id" would be image_1 for the first slide.;

});

But in the function SlideParkEventHandler, the slideIndex start from 0, so we get undefined src for the first slide. Hence we need to subtract 1 from the number in above code to get the correct image_id.

$("#container_photos div").each(function(){ // the "div" wrapping the "img"

        var number = $(this).index(); // here the index start from 1 !!
        $(this).children("img[u=image]").attr("id","image_" + **(number-1)**); // so the "id" would be image_1 for the first slide.;

});

Upvotes: 0

Nicolas Bocquel
Nicolas Bocquel

Reputation: 101

I answer to myself. I found how to place an "id" with number, automatically in a "img" tag :

<div id="container_photos "u="slides" ... >
    <div><img u="image" src="url1" /></div>
    <div><img u="image" src="url2" /></div>
</div>

<script>

jQuery(document).ready(function ($) {

    var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        $("#container_photos div").each(function(){ // the "div" wrapping the "img"

            var number = $(this).index(); // get the slideIndex !!
                    $(this).children("img[u=image]").attr("id","image_" + number);

                });

    function SlideParkEventHandler(slideIndex, fromIndex) {
        var src = $("#image_" + slideIndex).attr("src");

            $("#photoName_Container").html(src);
    }

    jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
});
</script>

Problem solved..!

Upvotes: 1

jssor
jssor

Reputation: 6985

<div u="slides" ... >
    <div><img id="image_0" u="image" src="url1" /></div>
    <div><img id="image_1" u="image" src="url2" /></div>
    ...
</div>


<script>

    jQuery(document).ready(function ($) {
        var options = {

            $AutoPlay: true,                                   //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $DragOrientation: 3                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        function SlideParkEventHandler(slideIndex, fromIndex) {
            var src = $("#image_" + slideIndex).attr("src");
            //do something here
        }

        jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
    });
</script>

Upvotes: 0

Related Questions