Question

我试图制作一个带有图片的网页，这应该提供同一网站上其他网页的确切功能。我可以这样做，除了图像放大功能。

应在弹出的框中放大图像。为此，在其他页面上使用js文件。（附后）

我尝试的方式如下。由于其他页面＆＃39;代码很混乱我无法抓住确切的事情。对此的帮助非常感谢。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
    $(window).load(function() {
      var productThumbImage = $('.search_holder .product-enlarge-trigger img');

      productThumbImage.each(function() {
        // Get on screen image
        var screenImage = $(this);

        // Create new offscreen image to test
        var theImage = new Image();
        theImage.src = screenImage.attr("src");

        // Get accurate measurements from that.
        var imageWidth = theImage.width;
        var imageHeight = theImage.height;

        if (imageWidth > imageHeight) {
          $(this).addClass('thumbCheckLandscape');
        }
      });
    });

    $(".product-enlarge-trigger img").hover(function() {
      alert('aaa');
    });

    $('body').removeClass();
    detectThumbs();

    function detectThumbs() {
      var productThumbImage = $('.product-enlarge-trigger img');
      alert(productThumbImage);

      productThumbImage.each(function() {
        var thumbCheck = $(this).attr('src');
        thumbCheck = thumbCheck.split('/');
        thumbCheck = thumbCheck[2];
        thumbCheck = thumbCheck.replace("%20", "");;

        $(this).parent().addClass(thumbCheck);
      });
    }
  </script>
  <script type="text/javascript" src="JS/Enlarge/image.enlarge.js"></script>
  <style type="text/css">
    .tablet_thumb_landscape.thumbCheckLandscape {
      margin-top: 16px;
      width: 117px !important;
    }
    .thumbCheckLandscape {
      width: 100% !important;
    }
    .product-enlarge-trigger img {
      width: 7%;
      position: static !important;
    }
    .item_thumb_wrapper {
      height: 186px;
      -webkit-box-shadow: inset 0px -15px 0px 0px rgba(218, 218, 218, 0.99);
      -moz-box-shadow: inset 0px -15px 0px 0px rgba(218, 218, 218, 0.99);
      box-shadow: inset 0px -15px 0px 0px rgba(218, 218, 218, 0.99);
      padding-bottom: 8px;
      border-bottom: 8px solid #c8c7c8;
      margin-bottom: 8px;
      position: relative;
    }
    .enlarge_thumb_close {
      width: 33px;
      height: 33px;
      right: -16px;
      top: -16px;
      position: absolute;
      display: block;
      background: url(../../../Images/Structure/search_enlarge_close.png)top left no-repeat;
      background-size: 100%;
      z-index: 1001 !important;
    }
  </style>
</head>

<body>
  <div class="item_thumb_wrapper">
    <img src="aa\xxx.jpg" class="resize" width="250" />
  </div>
  <div class="product-enlarge-trigger">
    <img src="aa\xxx.jpg" class="resize" width="250" />
  </div>
  <div class="box">
    <img src="aa\xxx.jpg" class="resize" width="250" />
  </div>
</body>

</html>

外部js文件

// Plugin Definition
$.fn.productEnlarge = function(options) {
  var defaults = {
      'fadeInSpeed': 300,
      'lastRowClass': 'last',
      'overlayDiv': 'item-overlay-global',
      'enlargeDiv': 'product-scroll-enlarge'
    }
    // Extend our default options with those provided
  var opts = $.extend({}, defaults, options);

  var getScrollTop = function() {
    var ScrollTop = document.body.scrollTop;
    if (ScrollTop == 0) {
      if (window.pageYOffset)
        ScrollTop = window.pageYOffset;
      else
        ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
    }
    return ScrollTop;
  }

  var getViewportHeight = function() {
    var viewportheight;
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
      viewportheight = window.innerHeight
    }
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !=
      'undefined' && document.documentElement.clientWidth != 0) {
      viewportheight = document.documentElement.clientHeight
    }
    // older versions of IE
    else {
      viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }
    return viewportheight;
  }

  /*** sniff the UA of the client and show hidden div's for that device ***/
  var ua = navigator.userAgent;
  var windowwidth = $(window).width();

  var checker = {
    android: ua.match(/Android/),
    appleiPad: ua.match(/iPad/)
  };
  if (windowwidth <= 660) {
    //if (checker.android){
    // do nothing
  } // end UA detection
  else {

    // For every trigger passed bind our events
    return this.each(function() {
      $this = $(this);
      $this.mouseover(function() {
        var hover_link = $(this).parent().attr('href');
        //var hover_call = $(this).parent().attr('rel');
        var hover_call = $(this).attr('rel');
        //alert (hover_link);
        // Create our overlay div
        //$('body').append('<a class="enlarge_thumb_close">Close</a><a href="' + hover_link + '" class="' + opts.overlayDiv + ' ' + opts.enlargeDiv + '"></a>');
        $('body').append('<a href="javascript://" onclick="' + hover_call + '" class="' + opts.overlayDiv + ' ' + opts.enlargeDiv + '"></a>');
        $(this).parent().parent().find('.card-link').addClass('cardTitleSelected');
        //$(this).parent().parent().find('.card-link').appendTo('.product-scroll-enlarge');
        //$('.cardTitleSelected').appendTo('.product-scroll-enlarge');
        //$('.cardTitleSelected').show();

        var product_target_title = $(this).parent().parent().find('.card-link span');
        //$('.product-scroll-enlarge').append('<div class="enlarge_title"><div class="et_text_wrap">'+ product_target_title.html() +'<br><strong>A6</strong> &pound;1.79 / <strong>A4</strong> &pound;2.99 / <strong>A3</strong> &pound;5.99</div></div>');
        $('.enlarge_title').hide().remove();
        $('.product-scroll-enlarge').append('<div class="enlarge_title"><div class="et_text_wrap">' + product_target_title.html() + '</div></div>');
        //alert(product_target_title.html());
        $('body').append('<div class="enlarge_thumb_close"></div>');


        // Get our targets
        var target = $('.' + opts.overlayDiv);

        // Set a fallback bind to remove this new target on mouseout
        target.mouseout(function() {
          $(this).remove();
        });

        var product_target = $(this).parent().parent().parent().find('.' + opts.enlargeDiv);


        if (product_target.length == 0) {
          return false;
        }


        $(target).html(product_target.html()).fadeIn(opts.fadeInSpeed);

        // Calculate our positioning
        var pos_top = (($(this).offset().top + ($(this).height() / 2)) - (target.height() / 2));
        var pos_left = $(this).offset().left + $(this).width() + 25;
        var totalwidth = pos_left + target.width() + 25;

        // If our image goes beyond our viewport width or has a class of 'last' flip our offset
        if ($(this).parent().hasClass(opts.lastRowClass) || totalwidth > document.body.offsetWidth) {
          pos_left = ($(this).offset().left - target.width()) - 30;
        }

        var totalheight = (pos_top - getScrollTop()) + parseInt(target.height());
        //var totalheight = ((pos_top - getScrollTop()) + ($(this).height() / 2)) - parseInt(taget.height() / 2);
        var windowHeight = getViewportHeight();

        // If our image goes beyond our window height
        if (totalheight > windowHeight) {
          var minusval = parseInt(totalheight) - windowHeight;
          pos_top = pos_top - (minusval + 30);
        }

        // If our image is less than the product height, display below
        if (totalheight < target.height()) {
          pos_top = getScrollTop() + 50;
        }

        // Set our positional coordinates
        $(target).css('top', pos_top).css('left', pos_left);

        setTimeout(function() {
          //do something special
          var mainimagewidth = $('.item-overlay-global img').width();
          $('.enlarge_thumb_close').css('top', pos_top - 16).css('left', pos_left + mainimagewidth - 16);
        }, 100);

        $('.enlarge_thumb_close').click(function() {
          $this.hide().remove();
          $('.' + opts.overlayDiv).hide().remove();
          $('.enlarge_thumb_close').hide().remove();
        });

      });



      $this.mouseout(function() {
        var windowwidth = $(window).width();
        var ua = navigator.userAgent;
        var checker = {
          appleiPad: ua.match(/iPad/)
        };
        if (windowwidth <= 440 || checker.appleiPad) {

        } else {
          $('.' + opts.overlayDiv).hide().remove();
          $('.enlarge_thumb_close').hide().remove();
          $('.enlarge_title').hide().remove();
        }
        //$('.cardTitleSelected').appendTo('.product-scroll-enlarge');
        //$('.cardTitleSelected').hide();
        //$('.product-scroll-enlarge .cardTitleSelected').after(''+ $this +' .shortlistSave');
      });

      $('.enlarge_thumb_close').click(function() {
        $('.' + opts.overlayDiv).hide().remove();
        $('.enlarge_thumb_close').hide().remove();
        $('.enlarge_title').hide().remove();
      });

      $('.item-overlay-global').click(function() {
        window.location = hover_link;
      });

    });

  }
};

在外部文件上为页面上的所有图像调用jQuery函数

0 个答案: