Показать случайное изображение с различными размерами, используя jquery - PullRequest
Новая
       63

Показать случайное изображение с различными размерами, используя jquery

0 голосов
/ 04 июля 2011

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

Можно ли рассчитать высоту и ширину изображения наэтап массива, а затем передать его в CSS / HTML, чтобы расположить его по центру?Вот код, с которым я сейчас работаю - любая помощь будет принята с благодарностью.

HTML / CSS: 

#content {
margin-top: -206px;
margin-left: -290px;
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
}

<div id="content">
<img class="shuffle" src="" width="580" height="413" border="0" alt="" />
</div>

JQuery: 

$(document).ready(function() { $('.shuffle').randomImage({path: 'images/'}); } );

(function($){ $.randomImage = { defaults: { path: 'images/', myImages: [ 'image01.jpg', 'image02.jpg','image03.jpg', 'image04.jpg', 'image05.jpg' ] } }

    $.fn.extend({ randomImage:function(config) { 
            var config = $.extend({}, $.randomImage.defaults, config); 
            return this.each(function() {
                var imageNames = config.myImages;
                var imageNamesSize = imageNames.length;
                var randomNumber = Math.floor(Math.random()*imageNamesSize);
                var selectedImage = imageNames[randomNumber];
                var fullPath = config.path + selectedImage;
                $(this).attr( { src: fullPath, alt: selectedImage } ); 
            }); 
        }
    });
})(jQuery);

Ответы [ 2 ]

1 голос
/ 04 июля 2011

Таким образом: 

...
var fullPath = config.path + selectedImage;
var img = new Image(); 
img.src = fullPath;
var width = img.width;
alert(width); 
...

Я проверил его в FF3.6, и он работает.

Надеюсь, это поможет.Приветствия

0 голосов
/ 08 июля 2011

Спасибо;это указало мне в правильном направлении.Ниже приведен код, который я закончил, который работает в Firefox 5 и Safari 5. Он не очень элегантный, но функциональный - возможно, кто-то еще сможет упростить его.

Редактировать 19.07.11: Основываясь на примере здесь Я значительно упростил код;однако я чувствую, что это может сделать с дальнейшей работой, чтобы упростить это далее.

html: 

<div id="wrapper">
    <div id="content"></div>
</div>

jquery: 

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

    var images = ['image01.jpg', 'image02.jpg','image03.jpg','image04.jpg','image05.jpg'];

    $('<img src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#content');

    (function($) {
        $.fn.verticalAlign = function() {
            return this.each(function(i) {
                var oh = $(this).height();
                var wh = $(window).height();
                var middle = (wh - oh) / 2;
                if (middle > 0) {
                    $(this).css('margin-top', middle);
                } else {
                    $(this).css('margin-top', 0);
                }
            });
        };
    })(jQuery);

    $(window).load(function() {
        $("#content").verticalAlign();
        var showContent = function() { $('#content').fadeIn(750); };
        setTimeout(showContent, 100);
    });

    $(window).bind('resize', function() {
        $("#content").verticalAlign();
    });
});
...