Hello
Контекстом является галерея и страница миниатюр
Цель сценария - минимизировать миниатюры и при наведении на них отображать их исходный размер.
Скрипт делает это хорошо:
-получить минимальный размер миниатюр
-определите этот минимальный размер для всех миниатюр
при наведении увеличьте z-индекс и определите размер как исходный размер этого эскиза
но если javascript отключен, это беспорядок, потому что каждый эскиз имеет свой собственный размер
Если я определю один и тот же размер для всех миниатюр с помощью CSS или в формате html, чтобы обеспечить совместимость при отсутствии js-, сценарий примет это как исходный размер миниатюр, тогда как это не реальный размер изображение.
код:
<script type="text/javascript">
jQuery(window).load(function(){
var min_dim_width = 10000;
var min_dim_height = 10000;
$("ul.thumbnails img").each(function() {
$.data(this, 'size', { width: $(this).width(), height: $(this).height() });
if ($.data(this,'size').height < min_dim_height)
min_dim_height = $.data(this,'size').height;
if ($.data(this,'size').width < min_dim_width)
min_dim_width = $.data(this,'size').width;
});
$(".thumbnails img").each(function () {
$(this)
.css('width', min_dim_width+'px')
.css('height', min_dim_height+'px')
$(this).parents('li')
.css('width', min_dim_width+5+'px')
.css('height', min_dim_height+5+'px');
}).hover(function() {
if ($.data(this,'size').height == min_dim_height)
{
new_dim_height = min_dim_height*1.2;
}
else
{
new_dim_height = $.data(this,'size').height;
}
if ($.data(this,'size').width == min_dim_width)
{
new_dim_width = min_dim_width*1.2;
}
else
{
new_dim_width = $.data(this,'size').width;
}
$(this).parents('li').css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-'+new_dim_height/2+'px',
marginLeft: '-'+new_dim_width/2+'px',
top: '50%',
left: '50%',
width: new_dim_width, /* Set new width */
height: new_dim_height, /* Set new height */
padding: '10px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
}, function() {
$(this).parents('li').css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: min_dim_width, /* Set width back to default */
height: min_dim_height, /* Set height back to default */
padding: '5px'
}, 400);
});
});
</script>
Спасибо за чтение и все мои соображения, если вам это удастся!
мы можем увидеть это в действии прямо здесь: http://www.planete -flop.fr / gallerie / index.php? / category / 12
PS: переформулировка моей "проблемы"