Форум

Lagshmivar · #1 (**permalink**) 17.01.2013, 23:39

Добрый день!

Мое знакомство с созданием сайтов почти на 100% ограничено HTML... сайты всегда делал для личного пользования, для знакомых... это я к тому, что в сложных материях могу просто не разобраться.

Что есть?
Сайт на 10-12 страниц, который нужно обновлять максимум раз в полгода. Пока что я готов работать с каждой страницей отдельно в Dreamweaver. Сайт сделан в табличной верстке. Пока умею только так.

Что нужно?
На одной из страниц небольшая галерея картинок. Сделана в виде вложенной таблицы, картинки в ячейках таблицы. Нужно, чтобы по клику картинки увеличивались.

Эта тема уже не раз поднималась в разных местах, но нигде я не нашел ответа, который бы удовлетворил меня как по результату, так и по доступности изложения. Потому и пишу здесь.

Какие требования:
- картинка увеличивается в том же окне.
- картинка уменьшается по клику на нее или на своб. область.
- никакого затемнения страницы, как это бывает.
- пользователь остается на той же странице (на некоторых сайтах при клике идет переход на новую страницу и там картинка увеличенная и на темном фоне - этого не надо).
- как именно картинка увеличивается - не важно, т.е. можно чтоб она разрасталась, можно чтоб просто на ее месте возникала увеличенна картинка...
- бывает, сделано так, что при клике на картинку осуществляется переход на следующую картинку в галерее. Это не нужно.

Надеюсь, что изложил все понятно.
В общем, интересует как самым простым способом все это реализовать.

P.S. Хотел скинуть ссылку на какой-нибудь сайт с примером того, как это должно работать, но как назло именно сейчас не могу найти... так что есть пока только описание.

ksa · #2 (**permalink**) 18.01.2013, 09:38

Сообщение от Lagshmivar

как самым простым способом все это реализовать

Как вариант...

<!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>

Serg_pnz · #3 (**permalink**) 18.01.2013, 10:18

Lagshmivar,
http://www.jstoolbox.com/2010/01/17/lightgallery-1-3/
очень простая и лёгкая галерея - сам использую и всем советую!
Всё настраивается, в т.ч. затемнение, список опций тут http://www.jstoolbox.com/proekty/lightgallery/

Lagshmivar · #4 (**permalink**) 18.01.2013, 14:45

Сообщение от ksa

Как вариант...

Спасибо!

Все получилось, только... наверное нужно мне изучать Java и CSS, потому как настройки необходимы.

Lagshmivar · #5 (**permalink**) 18.01.2013, 17:03

Сообщение от Serg_pnz

Lagshmivar,
http://www.jstoolbox.com/2010/01/17/lightgallery-1-3/
очень простая и лёгкая галерея - сам использую и всем советую!
Всё настраивается, в т.ч. затемнение, список опций тут http://www.jstoolbox.com/proekty/lightgallery/

Спасибо! Хороший результат -именно то, что нужно.
Только сам я не разберусь (увы). Чувствую, придется искать специалистов или фрилансеров по месту жительства.

Serg_pnz · #6 (**permalink**) 18.01.2013, 17:10

Lagshmivar,
спрашивай тут - помогу

Lagshmivar · #7 (**permalink**) 19.01.2013, 16:44

Сообщение от Serg_pnz

Lagshmivar,
спрашивай тут - помогу

Как я понимаю, надо выполнить 3 типа действий:

- вставить ссылки на скрипты в <head> страницы;
- куда-то загрузить файл lightgallery.js (в корень сайта?)
- вписать значения для каждой конкретной картинки.

Пока у меня не было времени детально разобраться во всем. Думаю, сделаю за выходные и тогда спрошу о том, что не понял - в любом случае практика будет кстати. И меньше задам глупых вопросов если что.

Большое спасибо!

Serg_pnz · #8 (**permalink**) 19.01.2013, 19:10

Смотри в демке код страницы.

Это подключили стили темы оформления и сам движек галереи

<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"

snake01 · #9 (**permalink**) 07.02.2015, 00:28

ksa Огромное спасибо!!! вы не представляете как спасли меня)) использовал данную функцию в joomla. Все сработало отлично.

НО хотелся бы чтобы при нажатии на картинку не просто увеличивал картинку но увеличивал в новом окне как тут...

http://www.jstoolbox.com/js/lightgal...o/demo_ru.html

что дописать к данному коду чтобы так сделал?

У меня на движке есть стандартная функция который так же увеличивает картинку просто надо поставить rel="vm-additional-images" к тегу A Но когда вставляю данную функцию то у меня вся страница открывается в место картинки

Deff · #10 (**permalink**) 07.02.2015, 02:28

snake01, http://studioad.ru/index/0-8

Форум

Справочник

Discord чат

Курсы javascript