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访问此模板的实时示例。

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

当我将鼠标悬停在网页内的图像（而不是滑块）上时，它会在图像中显示以下范围： -

项目名称： 别墅

但是当滑块内显示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秒触发一次的计时器，现在点击下一个＆amp;以前的箭头在jquery滑块内快速移动，图像将显示在页面底部，然后它会将自己重新定位到页面的中间位置，所以我可以将它保持在中间位置吗？

Answer 1

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

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

因为当您将鼠标悬停在图片上时，span会获得right: 0;。

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

1 个答案: