Сделал скрипт отображения галереи - тормозит жутко
Сделал скрипт отображения галереи - тормозит жутко
Не подскажите как можно оптимизировать его? Где слабое место?
<div id="modal100">
<p id="image-insert"><img id="big-foto"></p>
</div>
<div id="large">
<a class="jea_modal" href="<?php echo $mainImage->URL ?>" >
<img
src="<?php echo $mainImage->mediumURL ?>"
id="jea-preview-img"
alt="<?php echo $mainImage->title ?>"
title="<?php echo $mainImage->description ?>"
/>
</a>
</div>
<ul id="thumbnail">
<?php foreach ($this->row->images as $image) : ?>
<li >
<a class="gallery-min" href="<?php echo $image->mediumURL ?>" name="<?php echo $image->URL ?>">
<img class="" src="<?php echo $image->minURL ?>" alt="<?php echo $image->title ?>" title="<?php echo $image->description ?>"/>
</a>
</li>
<?php endforeach ?>
</ul>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#thumbnail a.gallery-min").click(function (e) {
e.preventDefault();
var getHref = jQuery(this).attr("href");
var getSrc = jQuery(this).attr("name");
jQuery("#large img").attr({"src": getHref});
jQuery("#large a.jea_modal").attr({"href": getSrc});
//console.log(getSrc);
});
jQuery("#large a.jea_modal").click(function (ei) {
ei.preventDefault();
var getHref = jQuery(this).attr("href");
jQuery("#image-insert img#big-foto").attr({"src": getHref});
setTimeout(function () {
jQuery("#modal100").show().delay(2000);
var widthPhoto = jQuery('img#big-foto').width();
var widthParent = jQuery('#image-insert').width();
var calcWidth = (widthParent - widthPhoto) / 2;
var heightPhoto = jQuery('img#big-foto').height();
var heightParent = jQuery('div#modal100').height();
var calcHeight = (heightParent - heightPhoto) / 2;
console.log(heightParent);
console.log(heightPhoto);
jQuery('img#big-foto').css({'position': 'absolute', 'margin-left': calcWidth, 'margin-right': calcWidth, 'margin-top': calcHeight, 'margin-bottom': calcHeight});
}, 500);
});
jQuery("#modal100").click(function () {
jQuery(this).hide();
});
});
</script>
|
alexmixaylov,
сделали бы нормальный макет с возмоожностью просмотра |
alexmixaylov,
а setTimeout это-то зачем? |
Цитата:
открыл в попапе одну картинку закрыл потом открыл вторую, а там висит еще перваяи через время появляется вторая |
alexmixaylov,
значит алгоритм показа непродуман раз требуется для jQuery setTimeout ... без макета далее никак. |
|
alexmixaylov, вариант ...
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
a.jea_modal {
width: 100%;
height: 100%;
display: block;
}
#modal100 {
display: none;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
z-index: 9999999;
}
#modal100 img{display: none;}
li{
float: left;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<div id="modal100">
<p id="image-insert"><img id="big-foto"></p>
</div>
<div id="large">
<a class="jea_modal" href="http://realtysea.esy.es/images/com_jea/images/5/main-282-1-960x680-big.jpg" >
<img src="http://realtysea.esy.es/images/com_jea/thumb-medium/5-main-282-1-960x680-big.jpg"
id="jea-preview-img"/>
</a>
</div>
<ul id="thumbnail">
<li >
<a class="gallery-min" href="http://realtysea.esy.es/images/com_jea/thumb-medium/5-dom_moey_mechti1.jpg"
name="http://realtysea.esy.es/images/com_jea/images/5/dom_moey_mechti1.jpg">
<img src="http://realtysea.esy.es/images/com_jea/thumb-min/5-dom_moey_mechti1.jpg"/>
</a>
</li>
<li >
<a class="gallery-min" href="http://realtysea.esy.es/images/com_jea/thumb-medium/5-x_df391ec2.jpg"
name="http://realtysea.esy.es/images/com_jea/images/5/x_df391ec2.jpg">
<img src="http://realtysea.esy.es/images/com_jea/thumb-min/5-x_df391ec2.jpg"/>
</a>
</li>
</ul>
<script>
jQuery(function($) {
jQuery.fn.center = function() {
var w = $(window);
this.css("position", "absolute");
this.css({
"top": (w.height() - this.height()) / 2 + w.scrollTop() + "px",
"left": (w.width() - this.width()) / 2 + w.scrollLeft() + "px"
});
return this
};
var $img = $("#thumbnail a.gallery-min img"),
$large = $('#large img'),
$big = $('#big-foto'),
$modal = $('#modal100');
$large.load(function() {
$large.fadeIn("slow")
}).click(function(event) {
event.preventDefault();
$modal.show();
$big.stop().show({'duration' : 1500, 'step' : function ()
{
$big.center();
}
})
})
$img.click(function(event) {
event.preventDefault();
var src = this.src.replace('thumb-min', 'thumb-medium');
var bigSrc = this.src.replace('thumb-min/5-', 'images/5/');
$big[0].src = bigSrc;
new Image().src = src;
$large.fadeOut("slow", function() {
this.src = src;
this.complete && $(this).load()
})
}).get(0).click();
$modal.click(function() {
$modal.hide();$big.stop(true,true).hide()
});
});
</script>
</body>
</html>
|
Подредактировал немного эту часть
$img.click(function (event) {
event.preventDefault();
var src = this.src.replace('thumb-min', 'thumb-medium');
//var bigSrc = this.src.replace('thumb-min', 'images');
var bigSrc = jQuery(this).parent().attr('name');
$big[0].src = bigSrc;
new Image().src = src;
$large.fadeOut("slow", function () {
this.src = src;
console.log(this);
this.complete && $(this).load()
})
}).get(0).click();
не получается там просто заменить путь, потому что thumb-min/5-', 'images/5/ может меняться числоРаботает ок, только с позиционированием вертикальным беда сдвигает вниз картинку модальную |
Цитата:
|
не картинка меньше
маржин по вертикали че то большой считает |
| Часовой пояс GMT +3, время: 04:48. |