Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2013, 22:39
Аватар для Lagshmivar
Новичок на форуме
Отправить личное сообщение для Lagshmivar Посмотреть профиль Найти все сообщения от Lagshmivar
 
Регистрация: 17.01.2013
Сообщений: 4

Увеличение картинки при клике - самый простой способ
Добрый день!

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

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

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

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

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

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

P.S. Хотел скинуть ссылку на какой-нибудь сайт с примером того, как это должно работать, но как назло именно сейчас не могу найти... так что есть пока только описание.
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2013, 08:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,991

Сообщение от 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>
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2013, 09:18
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Lagshmivar,
http://www.jstoolbox.com/2010/01/17/lightgallery-1-3/
очень простая и лёгкая галерея - сам использую и всем советую!
Всё настраивается, в т.ч. затемнение, список опций тут http://www.jstoolbox.com/proekty/lightgallery/
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2013, 13:45
Аватар для Lagshmivar
Новичок на форуме
Отправить личное сообщение для Lagshmivar Посмотреть профиль Найти все сообщения от Lagshmivar
 
Регистрация: 17.01.2013
Сообщений: 4

Сообщение от ksa
Как вариант...

Спасибо!

Все получилось, только... наверное нужно мне изучать Java и CSS, потому как настройки необходимы.
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2013, 16:03
Аватар для Lagshmivar
Новичок на форуме
Отправить личное сообщение для Lagshmivar Посмотреть профиль Найти все сообщения от Lagshmivar
 
Регистрация: 17.01.2013
Сообщений: 4

Сообщение от Serg_pnz Посмотреть сообщение
Lagshmivar,
http://www.jstoolbox.com/2010/01/17/lightgallery-1-3/
очень простая и лёгкая галерея - сам использую и всем советую!
Всё настраивается, в т.ч. затемнение, список опций тут http://www.jstoolbox.com/proekty/lightgallery/
Спасибо! Хороший результат -именно то, что нужно.
Только сам я не разберусь (увы). Чувствую, придется искать специалистов или фрилансеров по месту жительства.
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2013, 16:10
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Lagshmivar,
спрашивай тут - помогу
Ответить с цитированием
  #7 (permalink)  
Старый 19.01.2013, 15:44
Аватар для Lagshmivar
Новичок на форуме
Отправить личное сообщение для Lagshmivar Посмотреть профиль Найти все сообщения от Lagshmivar
 
Регистрация: 17.01.2013
Сообщений: 4

Сообщение от Serg_pnz Посмотреть сообщение
Lagshmivar,
спрашивай тут - помогу
Как я понимаю, надо выполнить 3 типа действий:

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

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

Большое спасибо!
Ответить с цитированием
  #8 (permalink)  
Старый 19.01.2013, 18:10
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

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

Это подключили стили темы оформления и сам движек галереи
<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"
Ответить с цитированием
  #9 (permalink)  
Старый 07.02.2015, 00:28
Новичок на форуме
Отправить личное сообщение для snake01 Посмотреть профиль Найти все сообщения от snake01
 
Регистрация: 07.02.2015
Сообщений: 2

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

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

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

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

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

Последний раз редактировалось snake01, 07.02.2015 в 02:20.
Ответить с цитированием
  #10 (permalink)  
Старый 07.02.2015, 02:28
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

snake01, http://studioad.ru/index/0-8
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
слайдер с увеличением картинки при клике Antond Работа 3 17.01.2013 20:07
Просто слайдер с увиличением картинки при клике Antond Элементы интерфейса 0 17.01.2013 11:45
Запись cookes при клике pavdin Общие вопросы Javascript 3 06.02.2012 16:19
Tabs в CSS - самый простой способ Critter (X)HTML/CSS 3 25.05.2009 01:23
Dojo может подгружать информацию из пунктов меню только при клике на выбранный пункт? vlad275 Dojo toolkit 0 30.10.2008 15:56