Функция jQuery photoResize не работает

Я новичок в jQuery, и я все еще в процессе обучения HTML и CSS. Я хотел иметь отзывчивый образ на главной странице моего веб-сайта, который масштабируется с помощью окна браузера пользователя. Я нашел это в github: https://github.com/gutierrezalex/photo-resize.git , но я думаю, что я могу использовать его неправильно, так как я не могу заставить его работать для меня. Вот мой HTML:Функция jQuery photoResize не работает

<head> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> 
</script> 

<reference path="jquery-1.5.1.min.js" /> 
<script src="jquery-photo-resize.js"></script> 
<script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
      $("img").photoResize() 
     }); 
</script> 
</head>

и вот JQuery-фото-resize.js файл:

function photoResize($) { 
"use strict"; 
$.fn.photoResize = function (options) { 

    var element = $(this), 
     defaults = { 
      bottomSpacing: 10 
     }; 

    function updatePhotoHeight() { 
     var o = options, 
      photoHeight = $(window).height(); 

     $(element).attr('height', photoHeight - o.bottomSpacing); 
    } 

    $(element).load(function() { 
     updatePhotoHeight(); 

     $(window).bind('resize', function() { 
      updatePhotoHeight(); 
     }); 
    }); 

    options = $.extend(defaults, options); 

    }; 
}

Как я сказал, я новичок, поэтому, пожалуйста, дайте мне знать, что я делаю неправильно, и как я могу достичь желаемого эффекта.

источник

2016-05-22 Mohammad Rashid

Вы забыли цитаты и закрывающий тег после min.js <скрипт SRC = "https://ajax.googleapis.com/ajax/libs /jquery/1.12.2/jquery.min.js "> –

Для этого вам не нужен jquery. Просто установите имя класса, а затем в таблице стилей используйте ширину. Если вы установите только ширину, она будет автоматически определять высоту, чтобы поддерживать соотношение сторон. То же самое касается установки только высоты. Если вы установите оба параметра, может быть отключено. Ширина может быть в процентах от текущего элемента. Вы также можете использовать vw (ширина порта просмотра). Также calc очень полезен.

{ width:75%}

Update:

.cropper { 
 
    width: 75px; 
 
    height: 75px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.cropped { 
 
    width: 100px; 
 
    position: absolute; 
 
    left: -12.5px; 
 
    top: -12.5px; 
 
}

<div class="cropper"> 
 
    <img class="cropped" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg"/> 
 
</div>

источник

2016-05-22 05:17:22

Но как я могу сделать это так, чтобы мое изображение было в основном обрезано видовым окном, но уменьшено до максимально возможного размера без пробелов? –

Ах. Таким образом, вы можете просто поместить div, который является желаемым размером, а затем поместить img в div так, чтобы он «обрезался». –

Большое спасибо, что сработало –

Вот код:

CSS:

.featured { overflow:hidden; 
    border:2px solid #000; 
    position:relative;} 
.featured img { width:100%; position:relative;} 
#pos_1 { width:200px; height:190px; } 
#pos_2 { width:150px; height:250px; } 
#pos_3 { width:350px; height:150px; }

HTML:

<div id="topGallery"> 

    <article class="featured" id="pos_1"> 
     <img src="abc.jpd" class="attachment-post-thumbnail wp-post-image" alt="piano" /> 
    </article> 
</div>

Javascript:

jQuery(document).ready(function($) { 

    ///HOME PAGE - image resizing 
     function imageLoaded() { 
      var w = $(this).width(); 
      var h = $(this).height(); 
      var parentW = $(this).parent().width(); 
      var parentH = $(this).parent().height(); 

      //console.log(w + '-' + h + '-' + parentW + '-' + parentH); 

      //if (w >= parentW){ //always true because of CSS 
       if (h > parentH){ 
        $(this).css('top', -(h-parentH)/2); 
       } else if (h < parentH){ 
        $(this).css('height', parentH).css('width', 'auto'); 
        $(this).css('left', -($(this).width()-parentW)/2); 
       } 
      //} 
     } 
     $('#topGallery img').each(function() { 
      if(this.complete) { 
       imageLoaded.call(this); 
      } else { 
       $(this).one('load', imageLoaded); 
      } 
     }); 
});

источник

2016-05-22 06:24:52

Функция jQuery photoResize не работает

ответ

Смежные вопросы