jQuery - замените уменьшенное изображение полноразмерным и плавно анимируйте переход и масштаб - PullRequest
Новая
       18

jQuery - замените уменьшенное изображение полноразмерным и плавно анимируйте переход и масштаб

1 голос
/ 05 октября 2011

У меня есть страница WordPress, на которой я хочу отобразить уменьшенное изображение, которое при нажатии заменяется полноразмерным изображением и плавно масштабируется до нового полного размера. Моя функция WordPress позволяет выводить src, ширину и высоту как для миниатюр, так и для полноразмерных файлов.

Я пробовал два решения этой проблемы:

1) Миниатюра завернута в ссылку в полный размер - http://jsbin.com/inuxej/8

2) Миниатюра рядом со скрытым (отображение: нет) в полном размере - http://jsbin.com/ogasic

Они оба работают, но переход не гладкий. Я не совсем уверен, как мне добиться плавного масштабирования от миниатюры до полноразмерного. У кого-нибудь есть идеи, как сделать этот переход плавным, чтобы после щелчка по миниатюре загружался полный размер, а затем анимация и масштабирование целого блока до полного размера?

Заранее большое спасибо!

-

Попытка 1:

JSBIN: http://jsbin.com/inuxej/8

Javascript: 

$(document).ready(function(){

// random resize images
$('.portfolio-image img').each(function() {
  var currWidth = $(this).attr("width");
  var currHeight = $(this).attr("height");

  $(this).removeAttr("width");
  $(this).removeAttr("height");

  var transformScale = (Math.floor(Math.random()*60 + 40))/100;

  $(this).width(Math.floor(currWidth*transformScale));
  $(this).height(Math.floor(currHeight*transformScale));
});

// portfolio images - make bigger on click
$('.portfolio-image a').click(function(e) {
  e.preventDefault();

  var smallImageSrc = $(this).children('img').attr("src");
  var bigImageSrc = $(this).attr("href");

  $(this).children('img').removeAttr("width");
  $(this).children('img').removeAttr("height");
  $(this).children('img').attr("src", bigImageSrc);

  $(this).children('img').load(function(){
    $(this).removeAttr("style");
    $('#ajax-loader').fadeOut();
  });
});

});

HTML: 

  <!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

  .portfolio-image {
    float: left;
    margin: 15px;
  }

  a, img {
    border: none;
    text-decoration: none;
  }

</style>
</head>
<body>
  <div class="portfolio-image">
    <a href="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/1-full.jpg">
    <img src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/1-thumb.jpg" height="300" width="200"/>
    </a>
  </div>

  <div class="portfolio-image">
    <a href="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/2-full.jpg">
    <img src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/2-thumb.jpg" height="300" width="200"/>
    </a>
  </div>

  <div class="portfolio-image">
    <a href="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/3-full.jpg">
    <img src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/3-thumb.jpg" height="300" width="200"/>
    </a>
  </div>

  <div class="portfolio-image">
    <a href="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/4-full.jpg">
    <img src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/4-thumb.jpg" height="300" width="200"/>
    </a>  
  </div>
</body>
</html>

Я также попробовал альтернативное решение, когда WordPress выводит оба изображения, а полный размер скрыт. Тем не менее, это, похоже, также вызывает проблему, поскольку jquery, похоже, получает значения измерений как неопределенные, так как объект настроен на отображение: нет.

Попытка 2:

JSBIN: http://jsbin.com/ogasic

Javascript: 

$(document).ready(function(){

// random resize images
$('.portfolio-image img').each(function() {
  var currWidth = $(this).attr("width");
  var currHeight = $(this).attr("height");

  $(this).removeAttr("width");
  $(this).removeAttr("height");

  var transformScale = (Math.floor(Math.random()*60 + 40))/100;

  $(this).width(Math.floor(currWidth*transformScale));
  $(this).height(Math.floor(currHeight*transformScale));
});

// portfolio images - make bigger on click
$('.portfolio-image').click(function() {

$(this).attr("width", $(this).children(".portfolio-image-display").attr("width"));
$(this).attr("height", $(this).children(".portfolio-image-display").attr("height"));

var bigImageSrc = $(this).children(".portfolio-image-full").attr("src");
var bigImageWidth = $(this).children(".portfolio-image-full").attr("width");
var bigImageHeight = $(this).children(".portfolio-image-full").attr("height");

$(this).children('.portfolio-image-display').attr("src", bigImageSrc);

$(this).children('.portfolio-image-display').load(function(){
    $(this).animate({
        height: bigImageHeight,
        width: bigImageWidth
    }, 1000, function() {
        //after
    });
});
    });


});

HTML: 

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

  .portfolio-image {
    float: left;
    margin: 15px;
  }

  .portfolio-image-full { 
    display: none;
  }

  a, img {
    border: none;
    text-decoration: none;
  }

</style>
</head>
<body>
  <div class="portfolio-image">
    <img class="portfolio-image-display" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/1-thumb.jpg" height="300" width="200"/>
    <img class="portfolio-image-full" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/1-full.jpg" height="600" width="400"/>
  </div>
  <div class="portfolio-image">
    <img class="portfolio-image-display" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/2-thumb.jpg" height="300" width="200"/>
    <img class="portfolio-image-full" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/2-full.jpg" height="600" width="400"/>
  </div>
  <div class="portfolio-image">
    <img class="portfolio-image-display" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/3-thumb.jpg" height="300" width="200"/>
    <img class="portfolio-image-full" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/3-full.jpg" height="600" width="400"/>
  </div>
  <div class="portfolio-image">
    <img class="portfolio-image-display" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/4-thumb.jpg" height="300" width="200"/>
    <img class="portfolio-image-full" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/4-full.jpg" height="600" width="400"/>
  </div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 05 октября 2011

ОК, я смог понять это с помощью элемента из предыдущего вопроса:

Как получить размер изображения (высота и ширина) с помощью JavaScript?

Большая хитрость заключалась в том, чтобы создать копию изображения в javascript, а при загрузке найти высоту и ширину этого изображения, а затем изменить источники и анимацию.

Спасибо за помощь, хупф. 

$('.portfolio-image').click(function() {

        var $clickedBox = $(this);

        var bigImageSrc = $(this).children(".portfolio-image-full").attr("src");

        var img = new Image();
            img.onload = function() {
            newWidth = this.width;
            newHeight = this.height;

            $clickedBox.children('.portfolio-image-display').attr("width", "100%");
            $clickedBox.children('.portfolio-image-display').attr("height", "100%");
            $clickedBox.children('.portfolio-image-display').attr("src", bigImageSrc);

            $clickedBox.children('.portfolio-image-display').animate({
                height: newHeight,
                width: newWidth
            }, 500, function(){
                // callback
            });
        }

        img.src = bigImageSrc;
    });
0 голосов
/ 05 октября 2011

После того, как пользователи щелкают по миниатюре, вы можете заменить миниатюру на полное изображение, уменьшенное до размера миниатюры ( убедитесь, что оно загружено перед заменой).Затем вы анимируете переход к полному размеру с помощью jQuery's animate () .

. В качестве альтернативы вы можете заменить пути только в атрибуте src = "" (после предварительной загрузки).полное изображение), а затем анимировать размер.

...