• 0
Sign in to follow this  
Followers 0
gumuch

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

Question

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

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

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

Спасибо.

Share this post


Link to post
Share on other sites

11 answers to this question

  • 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 я не знаю. Помогите. Подскажите точные пути размещения всей этой ерунды.

Спасибо.

Share this post


Link to post
Share on other sites
  • 0

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

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

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

Edited by ShumNo

Share this post


Link to post
Share on other sites
  • 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 - вместе попробуем

Share this post


Link to post
Share on other sites
  • 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 и т.д.

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

Share this post


Link to post
Share on other sites
  • 0
Добрый всем день. Вот такая у меня проблема. Хочу что бы при клике мышкой на маленькую картинку она увеличивалась. Несколько часов гуглил читал и пробовал но ничего не получается.

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

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

Edited by still swamp

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0
не так давно запилил самостоятельно для расширегия кругозора вот такую штуку. Возможно вам подойдёт.

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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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

Edited by gumuch

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0