Увеличение картинки при клике - самый простой способ
Добрый день!
Мое знакомство с созданием сайтов почти на 100% ограничено HTML... сайты всегда делал для личного пользования, для знакомых... это я к тому, что в сложных материях могу просто не разобраться. Что есть? Сайт на 10-12 страниц, который нужно обновлять максимум раз в полгода. Пока что я готов работать с каждой страницей отдельно в Dreamweaver. Сайт сделан в табличной верстке. Пока умею только так. Что нужно? На одной из страниц небольшая галерея картинок. Сделана в виде вложенной таблицы, картинки в ячейках таблицы. Нужно, чтобы по клику картинки увеличивались. Эта тема уже не раз поднималась в разных местах, но нигде я не нашел ответа, который бы удовлетворил меня как по результату, так и по доступности изложения. Потому и пишу здесь. Какие требования: - картинка увеличивается в том же окне. - картинка уменьшается по клику на нее или на своб. область. - никакого затемнения страницы, как это бывает. - пользователь остается на той же странице (на некоторых сайтах при клике идет переход на новую страницу и там картинка увеличенная и на темном фоне - этого не надо). - как именно картинка увеличивается - не важно, т.е. можно чтоб она разрасталась, можно чтоб просто на ее месте возникала увеличенна картинка... - бывает, сделано так, что при клике на картинку осуществляется переход на следующую картинку в галерее. Это не нужно. Надеюсь, что изложил все понятно. В общем, интересует как самым простым способом все это реализовать. P.S. Хотел скинуть ссылку на какой-нибудь сайт с примером того, как это должно работать, но как назло именно сейчас не могу найти... так что есть пока только описание. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
td {
position: relative;
}
.clone {
position: absolute;
top: 0;
left: 0;
}
.clone > img {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('td a').click(function () {
var o=$(this).parent();
var url=o.find('img').attr('src');
var html='<a href="#" class="clone"><img src="'+url+'" /></a>'
o.append(html);
o=o.find('.clone');
o.animate({width:'200%',height:'200%'});
o.click(function () {
$(this).remove();
});
});
});
</script>
</head>
<body>
<table>
<td>
<a href='#'><img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' /></a>
</td>
</table>
</body>
</html>
|
Lagshmivar,
http://www.jstoolbox.com/2010/01/17/lightgallery-1-3/ очень простая и лёгкая галерея - сам использую и всем советую! Всё настраивается, в т.ч. затемнение, список опций тут http://www.jstoolbox.com/proekty/lightgallery/ |
Цитата:
Спасибо! Все получилось, только... наверное нужно мне изучать Java и CSS, потому как настройки необходимы. |
Цитата:
Только сам я не разберусь (увы). Чувствую, придется искать специалистов или фрилансеров по месту жительства. |
Lagshmivar,
спрашивай тут - помогу |
Цитата:
- вставить ссылки на скрипты в <head> страницы; - куда-то загрузить файл lightgallery.js (в корень сайта?) - вписать значения для каждой конкретной картинки. Пока у меня не было времени детально разобраться во всем. Думаю, сделаю за выходные и тогда спрошу о том, что не понял - в любом случае практика будет кстати. И меньше задам глупых вопросов если что. Большое спасибо! |
Смотри в демке код страницы.
Это подключили стили темы оформления и сам движек галереи <link rel="stylesheet" media="screen" type="text/css" href="lightgallery/skins/default/style.css"> <script type="text/javascript" src="../lightgallery/lightgallery.min.js"> Для галереи лучше создать свою папку, там еще будут лежать картинки от темы, лучше не делать на своём сайте кашу, так что как в примере выше создай папку lightgallery. Конструкция верстки такова <a title="Leaves after rain" rel="lightgallery" href="001.jpg"> <img title="Leaves after rain" alt="Leaves after rain" src="001_t.jpg"> </a> href у ссылки - это путь к большой картинке, src у картинки - это путьк превьюшке. Важно! Что бы скрипт понял, что это ссылка для галереи, надо в ней, в ссылке, указать rel="lightgallery" И еще в хедере после подключения библиотеки так же надо инициализировать эту библиотеку, например так
lightgallery.init({
alias : 'ibox',
minPadding : 30
});
Если это alias : 'ibox' написать при инициализации, то в ссылке надо уже будет писать rel="ibox" |
ksa Огромное спасибо!!! вы не представляете как спасли меня)) использовал данную функцию в joomla. Все сработало отлично.
НО хотелся бы чтобы при нажатии на картинку не просто увеличивал картинку но увеличивал в новом окне как тут... http://www.jstoolbox.com/js/lightgal...o/demo_ru.html что дописать к данному коду чтобы так сделал? У меня на движке есть стандартная функция который так же увеличивает картинку просто надо поставить rel="vm-additional-images" к тегу A Но когда вставляю данную функцию то у меня вся страница открывается в место картинки |
snake01, http://studioad.ru/index/0-8
|
Deff,
К сожалению у меня не так уж просто все. уже 2 недели мучаюсь. Мой код таков: <label for="' . $productCustom->virtuemart_customfield_id .$row. '" class="other-customfield"> <a href="#1" >' . $this->displayProductCustomfieldFE ($product, $productCustom, $row) . '</a></label>'; Строка которая находиться в теге <a> гененрирует маленькие изображения. изображении от 5-30 штук. Как вы уже поняли я не могу вписать в href="#1" ссылки на большие изображения. т. к. нужно как то генерировать и большие изображения или хотя бы в href="" вписать код который будет тоже генерировать ссылки на малые изображения. Я в ручную поменял малые изображение на большие, Чтобы качество было хорошее при увлечении. С помощью вашего скрипта выше, получился увеличивать изображение при клике. В роли большой ссылки на изображения играет #1. но не красиво все получается картинки друг на друга лезут. По этому нужно чтобы он открывался красиво на весь экран.... Буду очень благодарен за помощь. Скриншот http://img4.tempfile.ru/14037/13fc7c...7c924a50b7.png п. с. Если удастся как то в href="" вписать код который будет генерировать ссылки на малые изображения. то я могу к тегу <а> прописать стандартный тег который есть на сайте и изображения будут увеличиваться без лишних кодов и скриптов. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
p { clear: both }
.sizeable { display: block; float: left; cursor: pointer; padding: 6px }
.fullscr { position: absolute; top: 0; left: 0; cursor: pointer }
.fullscr > img { width: 100%; height: 100% }
</style>
<script type="text/javascript">
$(document).ready(function () {
$('div img').click(function () {
var o = $(this).parent();
var url = o.find('img').attr('src');
var oftop = window.scrollY;
var html = '<div class="fullscr" style="top: '+oftop+'px"><img src="'+url+'" /></div>'
o.append(html);
o = o.find('.fullscr');
o.animate({width:'100%',height:'100%'});
o.click(function () {
$(this).remove();
});
});
$(window).scroll(function() {
$('div.fullscr').remove();
});
});
</script>
</head>
<body>
<p>some text
<div class="sizeable"><img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' /></div>
<div class="sizeable"><img src='http://javascript.ru/forum/images/ca_serenity/misc/logoNY.jpg' /></div>
<p>more text
</body>
</html>
|
ritorica,
на всякий случай [HTML run]добавьте парамерт запуска кода run[/HTML] |
а можно такое реализовать без жхуерити ?
|
А можно подсказать, как написать скрипт, чтобы можно было фотогалерею с стрелочкой для обзора , чтобы можно было закрыть и чтобы в том же диалоговом окне сверху?
Такой простой способ не интересует, не каждый может догадаться, что нужно ещё раз нажать на фото, чтобы оно уменьшилось и если фотографий больше то они все смещаются, что приносит хаос в галерее. |
Mary38,
jquery-zoom/ |
И что?
Спасибо, уже нашла, уже сделала. |
| Часовой пояс GMT +3, время: 00:55. |