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

[sergei299]

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

Подскажите кто знает, если можно, то поподробнее что и как делать.

[Гарик+]

Ну сей прибамбас зовётся лайтбокосом. Обычно для каждой из широкораспростанённых CMS имеется свой плагин, который при его установке и создаёт данный эффект. Для какого движка требуется плагин?

[sergei299]

Для Вордпресс

[Гарик+]

лайтбоксы для вордпреса. на выбор

[sergei299]

Большое спасибо, сейчас буду пробовать.

[dobrodukh]

Два пожалуй, самых популярных для WordPress - Fancybox for WordPress и Lightbox Plus ColorBox
[spoiler]http://wpnice.ru/fancybox-for-wordpress-krasivo-vyvodim-izobrazheniya/
http://wpnice.ru/lightbox-plus-udobnaya-obrabotka-vyivoda-izobrazheniy/[/spoiler]

[Ruson]

Плагин Fancybox for WordPress не очень нравится так как грузит весь сайт в целом, для себя нашел интересное решение без плагина, сушествует также возможность выбора различных функций. Можеш посмотреть тут если с англ. дружиш хоть чуть чуть, там в принцыпе по картинкам все очень понятно...

[Nurlan]

Проверенный скрипт для увеличения размера изображения при наведении мышки.
Это в 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=dоcument.getElementById('imx'+i);
if(f)f.className=(i==n)?"imxs":"";
f=dоcument.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" />

[Гарик+]

Что, весь код скрипта?  Зачем?
Проще подключить внешний код как-то так <script src="/my/script.js"></script>
Да и просто различных лайтбоксов  в виде плагинов для всех распространённых CMS сейчас навалом, для чего огород городить-то?

[Nurlan]

То же самое, но в обратном смысле можно сказать: зачем плагин, когда можно применить небольшой скрипт. Тем более, это совсем не сложно.