在图库中显示和隐藏图像最初工作，但第二次所有图像都消失

时间：2014-11-06 19:44:29

标签： javascript jquery html css image

我正在使用图片库来显示和显示图片，可以在以下链接中看到：

http://codepen.io/maudulus/pen/qJkuL

我希望图像分别位于箭头位置<div id="arrow-left">和<div id="arrow-right">的左侧或右侧时消失。

我在很多不同的版本中尝试了以下内容：

$('.gallery-tmb').each(function showHideImages() {
    arrowRightPosition = $('#arrow-right-small').offset().left;
    arrowLeftPosition = $('#arrow-left-small').offset().left;
    if ($(this).offset().left < arrowLeftPosition || $(this).offset().left > arrowRightPosition ){
        $( this ).hide();
    } else {
        $( this ).show();
    }
});

我还尝试使用以下库https://github.com/kevinmarx/overflowing，这允许我执行类似$('.gallery-tmb').overflowing('.gallery-outer')的操作来隐藏<div class="gallery-outer">之外的元素，但会发生什么如果在单击其中一个箭头后运行该函数，则所有元素都会消失。

当图像位于箭头位置的左侧或右侧时，如何使图像消失，但在两者之间保持显示？

HTML ：

<html>
   <head>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <style type="text/css"></style>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script><script src="/javascripts/json2.js"></script>
   </head>
   <body>
      <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400" rel="stylesheet" type="text/css">
      <script src="/javascripts/prefixfree.dynamic-dom.min.js"> </script><script src="/javascripts/prefixFreePlugin.js"> </script><script src="/javascripts/overflowing.js"> </script><script src="/javascripts/survey4_main.js"> </script>
      <link rel="stylesheet" href="/stylesheets/survey4style.css">
      <link rel="stylesheet" href="http://normalize-css.googlecode.com/svn/trunk/normalize.css">
      <div id="gallery_div_holder">
         <div id="gallery_div">
            <div id="gallery">
               <div id="arrow-left" style="display: none;">
                  <div id="arrow-left-small"></div>
               </div>
               <div class="gallery-outer">
                  <div class="gallery-inner">
                     <div class="gallery-tmb">
                        <img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"> </div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte">                                     </div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://wwwdelivery.superstock.com/WI/223/1598/PreviewComp/SuperStock_1598R-92232.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://ecx.images-amazon.com/images/I/41UFfdIBHEL._SY300_.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://thumbs.dreamstime.com/x/parking-place-sign-8298726.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://www.centerlinesupply.com/highway_products/signs/warning_signs/warning_signs_w10_w15/1444d36e8ad15d/1/w13_4_on_ramp_t.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://rlv.zcache.com/phoenix_az_road_sign_sticker-rae72c4928a614add87176050ec4092d5_v9wf3_8byvr_512.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://www.centerlinesupply.com/highway_products/pavement_marking_supplies/traffic/signs/route_markers/independent_mount_route_markers/144063631495c9/1/m1_6r_ranch_road_marker.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte">      </div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"> </div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte">                                     </div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://wwwdelivery.superstock.com/WI/223/1598/PreviewComp/SuperStock_1598R-92232.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://ecx.images-amazon.com/images/I/41UFfdIBHEL._SY300_.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://thumbs.dreamstime.com/x/parking-place-sign-8298726.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://www.centerlinesupply.com/highway_products/signs/warning_signs/warning_signs_w10_w15/1444d36e8ad15d/1/w13_4_on_ramp_t.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://rlv.zcache.com/phoenix_az_road_sign_sticker-rae72c4928a614add87176050ec4092d5_v9wf3_8byvr_512.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="http://www.centerlinesupply.com/highway_products/pavement_marking_supplies/traffic/signs/route_markers/independent_mount_route_markers/144063631495c9/1/m1_6r_ranch_road_marker.jpg" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"></div>
                     </div>
                     <div class="gallery-tmb">
                        <img src="https://pbs.twimg.com/profile_images/458796011356311552/2D5G8yIo.png" class="ui-draggable ui-draggable-handle" style="position: relative;">
                        <div class="texte"> </div>
                     </div>
                  </div>
               </div>
               <div id="arrow-right">
                  <div id="arrow-right-small">               </div>
               </div>
            </div>
         </div>
         <div id="lowerDiv">
            <div id="picDropDiv" class="ui-droppable"> </div>
         </div>
      </div>
   </body>
</html>

JS ：

 (function ($) {
    $.fn.thumbGallery = function (settings) {
        var $this = $(this);
        return this.each(function () {
            settings = jQuery.extend({
                speed: 900,
                leftArrow: $this.find('#arrow-left'),
                rightArrow: $this.find('#arrow-right'),
                galleryContainer: $this.find('.gallery-inner'),
                visibleImagesSize: 7
            }, settings);

            var imgElements = settings.galleryContainer.find('img').length;
            var size = settings.visibleImagesSize;

            settings.leftArrow.hide();

            if (imgElements > settings.visibleImagesSize) {
                settings.rightArrow.show();
                // .css("opacity","1");
            } else {
                settings.rightArrow.hide();
            }

            function animateLeft() {
                var el = settings.galleryContainer.children(":last");

                settings.galleryContainer.animate({
                    left: '+=' + el.outerWidth(true) + 'px'
                },
                settings.speed);
            }

            function animateRight() {
                var el = settings.galleryContainer.children(":first");
                settings.galleryContainer.animate({
                    left: '-=' + el.outerWidth(true) + 'px'
                },
                settings.speed);
            }

            function checkArrows() {
                if (size === settings.visibleImagesSize) {
                    settings.leftArrow.hide();
                } else {
                    settings.leftArrow.show();
                }

                if (size === imgElements) {
                    settings.rightArrow.hide();
                } else {
                    settings.rightArrow.show();
                }
            }

            settings.leftArrow.click(function () {
                animateLeft();
                size--;
                checkArrows();
            });

            settings.rightArrow.click(function () {
                animateRight();
                size++;
                checkArrows();
            });

        });
    };
})(jQuery);

$(document).ready(function () {
    $('#gallery').thumbGallery();
});

$(function() {
    $( ".gallery-tmb img" ).draggable({ start: function(){increaseZindex(this)}, revert: "invalid" });
    $( "#picDropDiv" ).droppable({
        tolerance: "fit",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        out: function(event, ui) {
            $(ui.helper).mouseup(function() {
                doSomethingTo(ui.draggable);
            });
        },
        drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
        }
    });
});

count = 0; 
$(document).on('click', '.mini_div', function(e) {
    $(this).zIndex( count );
    count+=1;
    console.log("z-index for this picture has been increased to " + count)
});
function increaseZindex(myElement){
    $(myElement).zIndex( count );
    count+=1;
    console.log("z-index for this picture has been increased to " + count)
    miniDivPosition = $(myElement).position()
    miniDivPositionLeft = miniDivPosition.left
    if (miniDivPositionLeft < 0) {
        $(this).addClass("hasMoved")
    }
}

/*var galleryCount = 0;
$('.gallery-tmb').each(function() {
    $(this).attr('id', String(galleryCount))
    galleryCount++
});
$('.gallery-tmb').each(function showHideImages() {
    arrowRightPosition = $('#arrow-right-small').offset().left;
    arrowLeftPosition = $('#arrow-left-small').offset().left;
    if ($(this).offset().left < arrowLeftPosition || $(this).offset().left > arrowRightPosition ){
        $( this ).hide();
    } else {
        $( this ).show();
    }
});
*/

http://codepen.io/maudulus/pen/qJkuL

0 个答案:

没有答案
相关问题
最新问题