Увеличение картинки при нажатии

Автор Тема: Увеличение картинки при нажатии  (Прочитано 5386 раз)

Оффлайн sergei299Автор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 128
  • Сообщений: 196
  • Карма: 22
  • Пол: Мужской
    • Просмотр профиля

Оффлайн sergei299Автор темы

  • Постоялец
  • ***
Подскажите как сделать так, чтобы при нажатии на картинку она увеличивалась. Много раз видел как при нажатии на картинку она увеличивается и затемняется задний фон, так же если на этой странице несколько картинок, то их можно пролистывать в таком режиме. Много всего перепробовал, перечитал на эту тему, установил плагин NextGEN Gallery (я так понял что все это делается с его помощью) лазил в его настройках, но все никак.

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


Оффлайн Гарик+

  • Бизнес оценка: (0)
  • КМС
  • *****
  • СПАСИБО: 1284
  • Сообщений: 3397
  • Карма: 108
  • Пол: Мужской
  • Награды Более одной тысячи спасибо КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Гарик+

  • КМС
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 1284
    • Сообщений: 3397
    • Карма: 108
    • Пол: Мужской
    • Награды Более одной тысячи спасибо КМС поисковой оптимизации
      • Просмотр профиля
Re: Увеличение картинки при нажатии
« Ответ #1 : 16-12-2013, 21:59:25 »
Ну сей прибамбас зовётся лайтбокосом. Обычно для каждой из широкораспростанённых CMS имеется свой плагин, который при его установке и создаёт данный эффект. Для какого движка требуется плагин?

Оффлайн sergei299Автор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 128
  • Сообщений: 196
  • Карма: 22
  • Пол: Мужской
    • Просмотр профиля

Оффлайн sergei299Автор темы

  • Постоялец
  • ***
Re: Увеличение картинки при нажатии
« Ответ #2 : 16-12-2013, 22:16:55 »
Для Вордпресс
Вы можете прочесть все пособия в мире и прослыть знатоком, но пока вы не начнете реально зарабатывать, все ваши знания равны нулю.

Оффлайн Гарик+

  • Бизнес оценка: (0)
  • КМС
  • *****
  • СПАСИБО: 1284
  • Сообщений: 3397
  • Карма: 108
  • Пол: Мужской
  • Награды Более одной тысячи спасибо КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Гарик+

  • КМС
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 1284
    • Сообщений: 3397
    • Карма: 108
    • Пол: Мужской
    • Награды Более одной тысячи спасибо КМС поисковой оптимизации
      • Просмотр профиля
Re: Увеличение картинки при нажатии
« Ответ #3 : 16-12-2013, 22:48:31 »
лайтбоксы для вордпреса. на выбор

Оффлайн sergei299Автор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 128
  • Сообщений: 196
  • Карма: 22
  • Пол: Мужской
    • Просмотр профиля

Оффлайн sergei299Автор темы

  • Постоялец
  • ***
Re: Увеличение картинки при нажатии
« Ответ #4 : 16-12-2013, 22:56:16 »
Большое спасибо, сейчас буду пробовать.
Вы можете прочесть все пособия в мире и прослыть знатоком, но пока вы не начнете реально зарабатывать, все ваши знания равны нулю.


Оффлайн dobrodukh

  • Бизнес оценка: (0)
  • Пользователь
  • **
  • СПАСИБО: 20
  • Сообщений: 71
  • Карма: 1
  • Пол: Мужской
    • Просмотр профиля
    • wpnice

Оффлайн dobrodukh

  • Пользователь
  • **
Re: Увеличение картинки при нажатии
« Ответ #5 : 23-12-2013, 06:22:11 »
Два пожалуй, самых популярных для WordPress - Fancybox for WordPress и Lightbox Plus ColorBox

« Последнее редактирование: 23-12-2013, 06:32:19 от dobrodukh »
WPNICE - ваш сайт о WordPress
WPCOMMERCE - форум по электронной коммерции на WordPress

Оффлайн Ruson

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 70
  • Сообщений: 232
  • Карма: 6
  • Пол: Мужской
    • Просмотр профиля
    • Your Ideas Online

Оффлайн Ruson

  • Постоялец
  • ***
Re: Увеличение картинки при нажатии
« Ответ #6 : 25-12-2013, 06:39:32 »
Плагин Fancybox for WordPress не очень нравится так как грузит весь сайт в целом, для себя нашел интересное решение без плагина, сушествует также возможность выбора различных функций. Можеш посмотреть тут если с англ. дружиш хоть чуть чуть, там в принцыпе по картинкам все очень понятно...

Оффлайн Nurlan

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 4
  • Сообщений: 26
  • Карма: 2
  • Пол: Мужской
    • Просмотр профиля
    • Дом и семья

Оффлайн Nurlan

  • Рекрут
  • *
Re: Увеличение картинки при нажатии
« Ответ #7 : 17-01-2014, 07:05:42 »
Проверенный скрипт для увеличения размера изображения при наведении мышки.
Это в head вставить нужно.
<script type="text/javascript">
var gi,gd,gj=1,gn=20,gt=20,gs,swd,sht,lwd,lht;function sli(ii,wd1,ht1,wd2,ht2,s){gi=ii;gd=1;swd=wd1;sht=ht1;lwd=wd2;lht=ht2;gs=s;rs();}function ssi(ii,wd1,ht1,wd2,ht2,s){gd=-1;swd=wd1;sht=ht1;lwd=wd2;lht=ht2;gs=s;rs();}function xy(x1,x2,gj){return (x2-x1)*gj/gn+x1;}function rs(){var w=Math.round(xy(swd,lwd,gj));
var h=Math.round(xy(sht,lht,gj));
if(gs)gi.style.left=(swd-w)+"px";
gi.style.width=w+"px";gi.style.height=h+"px";if(gd>0 && gn>gj){gj++;setTimeout('rs()',gt);}else if(0>gd && gj>0){gj--;setTimeout('rs()',gt);}}
function imx(n){
var f;
for(var i=0;i< 5;i++){
f=document.getElementById('imx'+i);
if(f)f.className=(i==n)?"imxs":"";
f=document.getElementById('im'+i);
if(f)f.style.display=(i==n)?"":"none";
}
}
</script>

Это при вставке картинке в редакторе WordPress.
<img onmouseover="sli(this,312,200,550,250,0)" onmouseout="ssi(this,312,200,550,250,0)" title="" alt="" src="" width="312" height="200" />

Оффлайн Гарик+

  • Бизнес оценка: (0)
  • КМС
  • *****
  • СПАСИБО: 1284
  • Сообщений: 3397
  • Карма: 108
  • Пол: Мужской
  • Награды Более одной тысячи спасибо КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Гарик+

  • КМС
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 1284
    • Сообщений: 3397
    • Карма: 108
    • Пол: Мужской
    • Награды Более одной тысячи спасибо КМС поисковой оптимизации
      • Просмотр профиля
Re: Увеличение картинки при нажатии
« Ответ #8 : 17-01-2014, 11:38:29 »
Что, весь код скрипта?  :o Зачем?
Проще подключить внешний код как-то так <script src="/my/script.js"></script>
Да и просто различных лайтбоксов  в виде плагинов для всех распространённых CMS сейчас навалом, для чего огород городить-то?
« Последнее редактирование: 17-01-2014, 11:41:18 от -Гарик »


Оффлайн Nurlan

  • Бизнес оценка: (0)
  • Рекрут
  • *
  • СПАСИБО: 4
  • Сообщений: 26
  • Карма: 2
  • Пол: Мужской
    • Просмотр профиля
    • Дом и семья

Оффлайн Nurlan

  • Рекрут
  • *
Re: Увеличение картинки при нажатии
« Ответ #9 : 17-01-2014, 14:10:19 »
То же самое, но в обратном смысле можно сказать: зачем плагин, когда можно применить небольшой скрипт. Тем более, это совсем не сложно.


 

Похожие темы

  Тема / Автор Ответов Последний ответ
15 Ответов
13178 Просмотров
Последний ответ 08-02-2012, 14:02:47
от [Константин]
1 Ответов
2688 Просмотров
Последний ответ 23-05-2012, 11:56:34
от rz00007
3 Ответов
1368 Просмотров
Последний ответ 27-02-2014, 12:29:33
от Donovan
3 Ответов
909 Просмотров
Последний ответ 27-08-2014, 09:52:47
от azazely85
3 Ответов
2485 Просмотров
Последний ответ 29-09-2014, 18:34:21
от vold57