how to show a span inside an image on a jquery slider

Question

I have the following markup to show an image gallery inside a web page :-

<div class="row">
                    <div class="list_carousel2 responsive">
                        <ul id="carousel2">
                            <li>
                                <figure><a href="~/img/big_1.jpg" class="thumb"><img src="~/img/small_1.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><img src="~/img/searchsmall.png" alt=""></span></a></figure>
                            </li>

now when i click on the small_1.jpg inside a normal web page, a jquery slider will be shown and it will show the big_1.jpg image. here is the script to initiate the jquery :-

<script>
 $('.thumb').touchTouch();
</script>

and here is the touchTouch.jquery.js script:-

/**
 * @name        jQuery touchTouch plugin
 * @author      Martin Angelov
 * @version     1.0
 * @url         http://tutorialzine.com/2012/04/mobile-touch-gallery/
 * @license     MIT License
 */

(function(){

    /* Private variables */

    var overlay = $('<div id="galleryOverlay">'),
        slider = $('<div id="gallerySlider">'),
        prevArrow = $('<a id="prevArrow"></a>'),
        nextArrow = $('<a id="nextArrow"></a>'),
        overlayVisible = false;


    /* Creating the plugin */

    $.fn.touchTouch = function(){

        var placeholders = $([]),
            index = 0,
            items = this;

        // Appending the markup to the page
        overlay.hide().appendTo('body');
        slider.appendTo(overlay);

        // Creating a placeholder for each image
        items.each(function(){
            placeholders = placeholders.add($('<div class="placeholder">'));
        });

        // Hide the gallery if the background is touched / clicked
        slider.append(placeholders).on('click',function(e){
            if(!$(e.target).is('img')){
                hideOverlay();
            }
        });

        // Listen for touch events on the body and check if they
        // originated in #gallerySlider img - the images in the slider.
        $('body').on('touchstart', '#gallerySlider img', function(e){

            var touch = e.originalEvent,
                startX = touch.changedTouches[0].pageX;

            slider.on('touchmove',function(e){

                e.preventDefault();

                touch = e.originalEvent.touches[0] ||
                        e.originalEvent.changedTouches[0];

                if(touch.pageX - startX > 10){
                    slider.off('touchmove');
                    showPrevious();
                }
                else if (touch.pageX - startX < -10){
                    slider.off('touchmove');
                    showNext();
                }
            });

            // Return false to prevent image 
            // highlighting on Android
            return false;

        }).on('touchend',function(){
            slider.off('touchmove');
        });

        // Listening for clicks on the thumbnails

        items.on('click', function(e){
            e.preventDefault();

            // Find the position of this image
            // in the collection

            index = items.index(this);
            showOverlay(index);
            showImage(index);

            // Preload the next image
            preload(index+1);

            // Preload the previous
            preload(index-1);

        });

        // If the browser does not have support 
        // for touch, display the arrows
        if ( !("ontouchstart" in window) ){
            overlay.append(prevArrow).append(nextArrow);

            prevArrow.click(function(e){
                e.preventDefault();
                showPrevious();
            });

            nextArrow.click(function(e){
                e.preventDefault();
                showNext();
            });
        }

        // Listen for arrow keys
        $(window).bind('keydown', function(e){

            if (e.keyCode == 37){
                showPrevious();
            }
            else if (e.keyCode==39){
                showNext();
            }

        });


        /* Private functions */


        function showOverlay(index){

            // If the overlay is already shown, exit
            if (overlayVisible){
                return false;
            }

            // Show the overlay
            overlay.show();

            setTimeout(function(){
                // Trigger the opacity CSS transition
                overlay.addClass('visible');
            }, 100);

            // Move the slider to the correct image
            offsetSlider(index);

            // Raise the visible flag
            overlayVisible = true;
        }

        function hideOverlay(){
            // If the overlay is not shown, exit
            if(!overlayVisible){
                return false;
            }

            // Hide the overlay
            overlay.hide().removeClass('visible');
            overlayVisible = false;
        }

        function offsetSlider(index){
            // This will trigger a smooth css transition
            slider.css('left',(-index*100)+'%');
        }

        // Preload an image by its index in the items array
        function preload(index){
            setTimeout(function(){
                showImage(index);
            }, 1000);
        }

        // Show image in the slider
        function showImage(index){

            // If the index is outside the bonds of the array
            if(index < 0 || index >= items.length){
                return false;
            }

            // Call the load function with the href attribute of the item
            loadImage(items.eq(index).attr('href'), function(){
                placeholders.eq(index).html(this);
            });
        }

        // Load the image and execute a callback function.
        // Returns a jQuery object

        function loadImage(src, callback){
            var img = $('<img>').on('load', function(){
                callback.call(img);
            });

            img.attr('src',src);
        }

        function showNext(){

            // If this is not the last image
            if(index+1 < items.length){
                index++;
                offsetSlider(index);
                preload(index+1);
            }
            else{
                // Trigger the spring animation

                slider.addClass('rightSpring');
                setTimeout(function(){
                    slider.removeClass('rightSpring');
                },500);
            }
        }

        function showPrevious(){

            // If this is not the first image
            if(index>0){
                index--;
                offsetSlider(index);
                preload(index-1);
            }
            else{
                // Trigger the spring animation

                slider.addClass('leftSpring');
                setTimeout(function(){
                    slider.removeClass('leftSpring');
                },500);
            }
        }
    };

})(jQuery);

a live sample of this template can be accessed from the following link.

but i am trying to do this change :-

1. when i hover over an image inside the web page (not the slider) it will show the following span inside an image :-

   Project name:Villa

but when the big_1.jpg image is displayed inside the slider no span will be shown. so is there a way to show the above span inside the image slider (without having to hover over it), this will allow users to read a description about the image inside the slider. so can anyone adivce how i can do so ?

here is the markup for the slider :-

<div id="galleryOverlay" style="display: block;" class="visible">
<div id="gallerySlider" style="left: 0%;">
<div class="placeholder">
<img src="img/big1.jpg">
</div>

EDIT i modified the touch script as follow where i added the following timer after placeholders.eq(index).html(this);:-

loadImage(items.eq(index).attr('href'), function(){
                placeholders.eq(index).html(this);
                var allcaptions = $(".list_carousel2 span");

                // setTimeout is a hack here, since the ".placeholders" don't exist yet
             setTimeout(
                function t() {

                    $(".placeholder").each(function (i) {
                        // in each .placeholder, copy its caption's mark-up into it (remove the img first)
                        var caption = allcaptions.eq(i).clone();
                        caption.find("img").remove();
                        $(this).append("<div class='thumb'>" + caption.html() + "</div>");
                    });
                    }
                    , 1000);

            });

this has partially worked where currently inside the jQuery slider i will get a text as follow:-

but i am trying to get something such as :-

second problem i am facing is that since i am defining a timer that fires each 1 second, now when click on the next & previous arrows quickly inside the jquery slider, the image will be shown on the bottom of the page then it will re-position itself to the middle of the page, so can i always keep it in the middle?

Answer 1

You need to give the .listgall li figure a span a right: 0;

.listgall li figure a span{
right: 0;
}

Because when you hover over the image the span gets a right: 0;.