Чат сообщества
|
   |
| Модератор форума: dotbot |
| Сообщество uCoz Архивариус Корзина Увеличение изображения при клике |
| Увеличение изображения при клике |
|
Доброе время суток.
Подскажите пожалуйста какой код нужно вставить, чтобы при клике на изображение оно плавно увеличилось до оригинального размера? Вот сайт: http://ballfootball.ucoz.com/ Заранее благодарю. http://ballfootball.ucoz.com - Сайт болельщиков мадридского "Реала"
|
|
Цитата сondor (  )GamilkarBarka, для этого есть стандартный класс ulightbox.<a href="картинка превью" class="ulightbox" target="_blank" title="пояснительный текст"><img alt="альтернативное название картинки" src="картинка превью "></a> Вы имеете ввиду это? http://pixs.ru/showimage/picturebmp_8428302_12866783.jpg http://ballfootball.ucoz.com - Сайт болельщиков мадридского "Реала"
Сообщение отредактировал GamilkarBarka - Воскресенье, 06 Июл 2014, 20:35:01
|
|
или если стандарт не устраивает - вот функция (ставите вот это перед </body>):
Код <script type="text/javascript"> if(document.images){(function(){var e,t=/Apple/.test(navigator.vendor),n=t?20:40,r=t?40:20;var i=function(t){t=t||window.event;if(!i.r.test(t.className))t=t.target||t.srcElement||null;if(!t||!i.r.test(t.className))return;var s=i,o=function(t){return t[0]*e+t[1]+"px"},u=function(){e=(1-Math.cos(s.ims[f].jump/n*Math.PI))/2;t.style.width=o(s.ims[f].w);t.style.height=o(s.ims[f].h);if(s.ims[f].d&&n>s.ims[f].jump){++s.ims[f].jump;s.ims[f].timer=setTimeout(u,r)}else if(!s.ims[f].d&&s.ims[f].jump>0){--s.ims[f].jump;s.ims[f].timer=setTimeout(u,r)}},a=document.images,f=a.length-1;for(f;f>-1;--f)if(a[f]==t)break;f=f+t.src;if(!s.ims[f]){t.title="";s.ims[f]={im:new Image,jump:0};s.ims[f].im.onload=function(){s.ims[f].w=[s.ims[f].im.width-t.width,t.width];s.ims[f].h=[s.ims[f].im.height-t.height,t.height];s(t)};s.ims[f].im.src=t.src;return}if(s.ims[f].timer)clearTimeout(s.ims[f].timer);s.ims[f].d=!s.ims[f].d;u()};i.ims={};i.r=new RegExp("\\bexpando\\b");if(document.addEventListener){document.addEventListener("mouseover",i,false);document.addEventListener("mouseout",i,false)}else if(document.attachEvent){document.attachEvent("onmouseover",i);document.attachEvent("onmouseout",i)}};))} </script> и к картинке дописываете класс вот так: <img src="путь_к_картинке" alt="описание_картинки" width="XXX" class="expando" > (обязательно задайте ширину (width) вашей уменьшенной картинки - без этого функция не работает !)  WWW.DOGICA.COM / WWW.DOGICA.ORG Сообщение отредактировал сondor - Воскресенье, 06 Июл 2014, 20:41:28
|
|
Цитата GamilkarBarka ( )Спасибо за ответ. Вы имеете ввиду это? GamilkarBarka, к кодам $IMAGE1$, $IMAGE2$, $IMAGE3$ и т.д. класс ulightbox устанавливается автоматически. Также можно вручную прописывать этот класс где требуется увеличение картинки по клику. |
|
Мне бы хотелось, чтобы картинка открывалась плавно в том же окне (напр., у картинки в верхнем правом углу "close" - нажал и ты снова на той же странице, где и сама картинка до нажатия). А у меня при нажатии раскрывается оригинальный размер картинки, НО так, что для возврата на страницу этой новости приходится нажимать на стрелку "BACK" в браузере.
Надеюсь, что объяснил понятливо. http://ballfootball.ucoz.com - Сайт болельщиков мадридского "Реала"
|
|
Цитата Dogica ( )и к картинке дописываете класс вот так:<img src="путь_к_картинке" alt="описание_картинки" width="XXX" class="expando" > (обязательно задайте ширину (width) вашей уменьшенной картинки - без этого функция не работает !) Сори за такие вопросы, но ГДЕ мне дописать такое? Что-то не могу разобраться...  http://ballfootball.ucoz.com - Сайт болельщиков мадридского "Реала"
|
|
к картинкам которые вы хотите увеличивать - например, у вас на основной фотка Мората посредине.. вот ее код:
<img alt="" src="http://ballfootball.ucoz.com/_nw/0/80783325.jpg"> переделайте на такой <img alt="" src="http://ballfootball.ucoz.com/_nw/0/80783325.jpg" width="50px" class="expando"> и так к каждой картинке на страничке, которую хотите увеличить (только не забудьте саму функцию скопировать перед </body>) закрывающий тэг </img> не нужен - сам недавно узнал что это ошибка, благодаря WEBANET  WWW.DOGICA.COM / WWW.DOGICA.ORG Сообщение отредактировал Dogica - Воскресенье, 06 Июл 2014, 23:20:28
|
|
Цитата Dogica ( )к картинкам которые вы хотите увеличивать - например, у вас на основной фотка Мората посредине.. вот ее код:<img alt="" src="http://ballfootball.ucoz.com/_nw/0/80783325.jpg"></img> переделайте на такой <img alt="" src="http://ballfootball.ucoz.com/_nw/0/80783325.jpg" width="50px" class="expando"> и так к каждой картинке на страничке, которую хотите увеличить (только не забудьте саму функцию скопировать перед </body>) закрывающий тэг </img> не нужен - сам недавно узнал что это ошибка, благодаря WEBANET Спасибо. Но дело в том, что картинку я вставлял через это - http://pixs.ru/showimage/picturebmp_8428302_12866783.jpg Поэтому не знаю ГДЕ подредактировать тот код, который вы указали. Добавлено (07 Июл 2014, 13:06:48) http://ballfootball.ucoz.com - Сайт болельщиков мадридского "Реала"
|
|
Цитата Dogica ( )код на главной странице сайта.. Я сделал по другому. Вот результат, например: http://ballfootball.ucoz.com/news/morata_v_juventuse/2014-07-06-76 Но хотелось бы, чтобы такое было и на главной странице. П.С. И еще, помогите кто может: на слайдере на темной траспарентной полосе есть как бы краткое объяснение статьи - оно черными буквами. Как сделать их белыми? Менял в css, но после изменения меняется цвет текста везде. Добавлено (07 Июл 2014, 20:53:10) http://ballfootball.ucoz.com - Сайт болельщиков мадридского "Реала"
|
|
Цитата сondor ( )GamilkarBarka, прописать в css:.info { color: #fff; } Спасибо. Помогли. Теперь осталось только реализовать увеличение картинки при клике на главной странице. На странице материала и комментариев к нему, если посмотрите, картинка увеличивается при клике, а на главной нет. http://ballfootball.ucoz.com - Сайт болельщиков мадридского "Реала"
|
| |||
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!