Увеличение картинки при клике - самый простой способ
Добрый день!
Мое знакомство с созданием сайтов почти на 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
|
| Часовой пояс GMT +3, время: 20:20. |