• 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

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


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

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

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

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

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


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

Войти

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


Войти сейчас