如何在 jquery 滑块上显示图像内的跨度

Question

我有以下标记来显示网页内的图片库：-

<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>

现在，当我在普通网页中单击 small_1.jpg 时，将显示一个 jquery 滑块，它将显示 big_1.jpg 图像。 这是启动 jquery 的脚本：-

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

这里是touchTouch.jquery.js 脚本：-

/**
 * @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);

可以从以下link 访问此模板的实时示例。

但我正在尝试进行此更改：-

1. 当我将鼠标悬停在网页内的图像（不是滑块）上时，它将在图像内显示以下跨度：-

   项目名称：别墅

但是当 big_1.jpg 图像显示在滑块内时，不会显示跨度。那么有没有办法在图像滑块内显示上述跨度（无需将鼠标悬停在其上），这将允许用户阅读有关滑块内图像的描述。那么任何人都可以告诉我该怎么做吗？

这是滑块的标记：-

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

编辑 我修改了触摸脚本如下我在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);

            });

这部分工作在当前在 jQuery 滑块中我将得到如下文本：-

但我想得到一些东西，例如：-

我面临的第二个问题是，由于我定义了一个每 1 秒触发一次的计时器，现在当在 jquery 滑块内快速单击下一个和上一个箭头时，图像将显示在页面底部然后它会重新定位到页面的中间，所以我可以一直保持在中间吗？

Answer 1

你需要给.listgall li figure a span一个right: 0;

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

因为当您将鼠标悬停在图像上时，span 会得到一个 right: 0;。