• 0
gumuch

При клике мышкой увеличить картинку

Вопрос

Добрый всем день. Вот такая у меня проблема. Хочу что бы при клике мышкой на маленькую картинку она увеличивалась. Несколько часов гуглил читал и пробовал но ничего не получается. Я не специалист и мне нужна подробная информация, как говорится для тех кто в танке. Вот сайт: http://www.mogemvse.in.ua/index.php?option...=4&Itemid=4

при наведение на тортики они должны увеличиваться, подскажите как это сделать? что нужно устанавливать и куда вставлять?

Если нужен код html или css могу выставить.

Спасибо.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

11 ответов на этот вопрос

  • 0
можно с помощью библиотеки lightbox

http://www.lokeshdhakar.com/projects/lightbox2/

Вот это вариант мне нравится. Вот только я пробую но у меня не получается. Видать не хватает знаний английского языка. Я скачал lightbox 2.04 в ней папки css, images, js и документ index. Подскажите что и куда нужно разместить. В index.php между тегами head я прописал

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

В папку css вставил файл lightbox из скачаной папки css.

В корневую папку images вставил картинки со скачанной папки images

Вот куда вставлять скачанную папку js я не знаю. Помогите. Подскажите точные пути размещения всей этой ерунды.

Спасибо.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

папка images скорее для примера. css тоже надо подключать если картинки у вас почти на каждой странице то имеет смысл стили перенести в общий файл стилей для сайта. как подключается стили и скрипт к картинкам смотрите файл index того что вы скачали.

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

... как интересно ваш сайт предлагает услуги по созданию сайтов? :)

Изменено пользователем ShumNo

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

добавляй эту строчку

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

после строчек со стилями, в head.

папку js кидай в корень сайта, ну где находится index.php

как активировать скрипт :

к каждому изображению, которое нужно увеличить добавляешь в исходник

<href = "images/картинка для увеличения.jpg" rel = "lightbox" title = "описание картинки"> картинка #1 </a>

если что то непонятно и не получается, то стучи в асю 6633602 - вместе попробуем

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
добавляй эту строчку

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

после строчек со стилями, в head.

папку js кидай в корень сайта, ну где находится index.php

как активировать скрипт :

к каждому изображению, которое нужно увеличить добавляешь в исходник

<href = "images/картинка для увеличения.jpg" rel = "lightbox" title = "описание картинки"> картинка #1 </a>

если что то непонятно и не получается, то стучи в асю 6633602 - вместе попробуем

Все делаю ка говорите, но ничего не получается. Вот то что у меня написано в head:

<head>
<title>Печать, Гравировка, Вышивка, Дизайн, Эксклюзив Тел.: (096) 143-79-02 | МожемВсе</title>
<base href="http://mogemvse.in.ua/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="подарки, дизайн, разработка, сайт, фотокристалл, фото-торт, стекло, печать, фото, чашки, часы, логотип, подушки, футболка, рисунки, сувениры, гравировка, металл, пазлы, вышивка, фотография, эксклюзив, цены" />
<meta name="title" content="Фото на тортах" />
<meta name="author" content="Максим" />
<meta name="description" content="Прикольные подарки. Торты с фотографиями. Печать на футболках. Разработка сайтов. Фото на стекле. Гравировка. Печать. Фото-торты. Вышивка. Печать на чашках. Печать, гравировка на часах. Открытки и пазлы с фотографиями. Печать на подушках. Сувениры. Аксессуары. Гравировка на подарках. Вышивка на одежде. Эксклюзивные подарки." />

<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Фото на тортах</title>
<link href="/templates/rhuk_milkyway/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>


<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="/templates/rhuk_milkyway/css/template.css" type="text/css" />
<link rel="stylesheet" href="/templates/rhuk_milkyway/css/blue.css" type="text/css" />
<link rel="stylesheet" href="/templates/rhuk_milkyway/css/blue_bg.css" type="text/css" />
<!--[if lte IE 6]>
<link href="/templates/rhuk_milkyway/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
</head>

А вот то что я пишу для картинки в материале:

<td>
<p style="text-align: center;"><a href="images/art/98_1.png" rel="lightbox"><img src="images/art/98.png" border="0" width="205" height="187" /></a></p>
</td>

папку js кинул в корень сайте, там где папки: administratorр, templates, plugins и т.д.

Вот что я не так делаю???

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Добрый всем день. Вот такая у меня проблема. Хочу что бы при клике мышкой на маленькую картинку она увеличивалась. Несколько часов гуглил читал и пробовал но ничего не получается.

А имеет значение, где лежат картинки?

Если нет, то можно вот так https://catlair.net/?UIDMenu=280&Body=b...amp;UIDNews=415.

Изменено пользователем still swamp

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

не так давно запилил самостоятельно для расширегия кругозора вот такую штуку. Возможно вам подойдёт.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
не так давно запилил самостоятельно для расширегия кругозора вот такую штуку. Возможно вам подойдёт.

интересно. А как такое сделать????

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Там же код весь в файле явно показан... При клике создаётся поверх всего контента полупрозрачный чёрный див а поверх него див с нужным содержанием...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

Изменено пользователем gumuch

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас