Question

我一直在研究一个courasel，我认为它被称为或滑块即时尝试链接我的js文件，但它不起作用，我不能把我的手指放在这个问题上。我试图通过点击按钮显示能够移动到下一个和上一个的图片;一旦点击该项目，他们就是“fancybox”js提供的弹出窗口。我已经下载了一个jquery库并将其保存为“query.js”

<html>
<head> 
<link rel="stylesheet" type="text/css" href="attempt2.css">

<script src="attempt2.js"></script>
</head>
<body>


<div class="gallery-wrap">
  <div class="gallery clearfix">
    <div class="gallery__item">
      <img src="images/image1.jpg" class="gallery__img" alt="" />
    </div>
     <div class="gallery__item">
      <img src="images/image2.jpg" class="gallery__img" alt="" />
    </div>
    <div class="gallery__item">
      <img src="images/image3.jpg" class="gallery__img" alt="" />
    </div>
    <div class="gallery__item">
      <img src="images/image4.jpg" class="gallery__img" alt="" />
    </div>
    <div class="gallery__item">
      <img src="images/image5.jpg" class="gallery__img" alt="" />
    </div>
  </div>
  <div class="gallery__controls clearfix">
    <div href="#" class="gallery__controls-prev">
      <img src="images/prev.png" alt="" />
    </div>
    <div href="#" class="gallery__controls-next">
      <img src="images/next.png" alt="" />
    </div>
  </div>
</div>
<script type="text/javascript" src="query.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen"/>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">

    // Only run everything once the page has completely loaded
    $(window).load(function(){

        // Fancybox specific
        $(".gallery__link").fancybox({
            'titleShow'     : false,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
        });

        // Set general variables
        // ====================================================================
        var totalWidth = 0;

        // Total width is calculated by looping through each gallery item and
        // adding up each width and storing that in `totalWidth`
        $(".gallery__item").each(function(){
            totalWidth = totalWidth + $(this).outerWidth(true);
        });

        // The maxScrollPosition is the furthest point the items should
        // ever scroll to. We always want the viewport to be full of images.
        var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();

        // This is the core function that animates to the target item
        // ====================================================================
        function toGalleryItem($targetItem){
            // Make sure the target item exists, otherwise do nothing
            if($targetItem.length){

                // The new position is just to the left of the targetItem
                var newPosition = $targetItem.position().left;

                // If the new position isn't greater than the maximum width
                if(newPosition <= maxScrollPosition){

                    // Add active class to the target item
                    $targetItem.addClass("gallery__item--active");

                    // Remove the Active class from all other items
                    $targetItem.siblings().removeClass("gallery__item--active");

                    // Animate .gallery element to the correct left position.
                    $(".gallery").animate({
                        left : - newPosition
                    });
                } else {
                    // Animate .gallery element to the correct left position.
                    $(".gallery").animate({
                        left : - maxScrollPosition
                    });
                };
            };
        };

        // Basic HTML manipulation
        // ====================================================================
        // Set the gallery width to the totalWidth. This allows all items to
        // be on one line.
        $(".gallery").width(totalWidth);

        // Add active class to the first gallery item
        $(".gallery__item:first").addClass("gallery__item--active");

        // When the prev button is clicked
        // ====================================================================
        $(".gallery__controls-prev").click(function(){
            // Set target item to the item before the active item
            var $targetItem = $(".gallery__item--active").prev();
            toGalleryItem($targetItem);
        });

        // When the next button is clicked
        // ====================================================================
        $(".gallery__controls-next").click(function(){
            // Set target item to the item after the active item
            var $targetItem = $(".gallery__item--active").next();
            toGalleryItem($targetItem);
        });
    });
    </script>

</body>
</html>

Answer 1

在HTML页面的嵌入式脚本中，您已将Fancybox项目称为“.gallery__link”，并且您尚未使用Fancybox的链接来使用。那么，你写的地方：

<div class="gallery__item">
  <img src="images/image3.jpg" class="gallery__img" alt="" />
</div>

应该是：

 <a href="images/image3.jpg" class="gallery__link">
  <img src="images/image3.jpg" />
</a>

Fancybox网站上的

Here's a quick guide如何做不同的事情：

如果您需要更多帮助，请随时发表评论

Here's a link到一个非常简单的ZIP，其中包含一个包含所需链接和Javascript的基本HTML页面。

Javascript链接问题

1 个答案: