| |
|
|
| | Задача: при клике на миниатюру показать увеличенное изображение.
Для этого в стилях прописано
.in {
padding: 5px 5px 5px 5px;
}
.in img {
width:200px;
border: 5px solid #ccc;
}
.in img:hover {
width:200px;
border: 5px solid red;
cursor: pointer;
}
#img_container {
position: fixed;
display: none;
left: 50%;
margin-left: -400px;
z-index: 480;
top: 20px;
}
#img_container img {
border: 2px solid red;
}
|
А в коде
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.in img').click(
function()
{
var imgSrc = $(this).attr("src");
$('#img_container img').attr({src: imgSrc});
$('#img_container').fadeIn('slow');
});
$('#img_container').click(
function()
{
$(this).fadeOut();
});
});
</script>
<div id="img_container"><img src="" width="800px"></div>
<div class="in"><img src="1.jpg"></div>
|
При клике на миниатюру изображение помещается в контейнер и воспроизводится с шириной 800 пикселей.
Всё это хорошо работает, но проблема возникает при наличии нескольких графических файлов большого объёма, поскольку страница делается слишком тяжелой.
Нельзя ли сделать так, чтобы использовать два графических файла - один для создания миниатюры 1.jpg, а другой 1-big.jpg по клику подкачивать через jquery и помещать в контейнер для воспроизведения? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(07.05.2012 в 22:23)
| | | большие файлы надо отдавать по FTP. показать превью, а по клику направить на большое
изображение, там уже браузер спросит, чего ты хочешь - посмотреть или загрузить. | |
| |
|
|
| |
|
|
| |
для: elenaki
(08.05.2012 в 10:13)
| | | В моем случае функционал требуется такой, как я его описал (по FTP там качать совершенн ни к чему). | |
| |
|
|
