Главная arrow icon Вопросы arrow icon Технологии arrow icon JavaScript,Ajax,HTML arrow icon Где найти скрипт по загрузке больших…

Где найти скрипт по загрузке больших фото по клику и не раньше (для ЛП Генератора) - вопрос №1652149

На одностраничнике в LPGenerator'е стоит набор маленьких фотографий. Нужен скрипт, который при клике на такую фотографию загрузит большую и выведет всплывающее окно с это большой фотографией.
В момент загрузки страницы большие фотографии грузится не должны. Т е время загрузки страницы от веса больших фотографий не зависит.
Где найти такой скрипт?
Михаил
05.10.15
Технологии / JavaScript,Ajax,HTML
2 ответа
Javascript
сайт
програмирование

Лучший ответ по мнению автора

Рейтинг: 368
<html><head><script type=«text/javascript»>function ImageExpander(oThumb,sImgSrc){this.oThumb=oThumb;this.oThumb.expander=this;this.oThumb.onclick=function(){this.expander.expand();}this.smallWidth=oThumb.offsetWidth;this.smallHeight=oThumb.offsetHeight;this.bExpand=true;this.bTicks=false;if(!window.aImageExpanders){window.aImageExpanders=new Array();}window.aImageExpanders.push(this);this.oImg=new Image();this.oImg.expander=this;this.oImg.onload=function(){this.expander.onload();}this.oImg.src=sImgSrc;}ImageExpander.prototype.onload=function(){this.oDiv=document.createElement(«div»);document.body.appendChild(this.oDiv);this.oDiv.appendChild(this.oImg);this.oDiv.style.position=«absolute»;this.oDiv.expander=this;this.oDiv.onclick=function(){this.expander.toggle();};this.oImg.title=«Click to reduce.»;this.bigWidth=this.oImg.width;this.bigHeight=this.oImg.height;if(this.bExpand){this.expand();}else{this.oDiv.style.visibility=«hidden»;this.oImg.style.visibility=«hidden»;}}ImageExpander.prototype.toggle=function(){this.bExpand=!this.bExpand;if(this.bExpand){for(var i in window.aImageExpanders)if(window.aImageExpanders[i]!==this)window.aImageExpanders[i].reduce();}}ImageExpander.prototype.expand=function(){this.bExpand=true;for(var i in window.aImageExpanders)if(window.aImageExpanders[i]!==this)window.aImageExpanders[i].reduce();if(!this.oDiv)return;this.oThumb.style.visibility=«hidden»;this.x=this.oThumb.offsetLeft;this.y=this.oThumb.offsetTop;this.w=this.oThumb.clientWidth;this.h=this.oThumb.clientHeight;this.oDiv.style.left=this.x+«px»;this.oDiv.style.top=this.y+«px»;this.oImg.style.width=this.w+«px»;this.oImg.style.height=this.h+«px»;this.oDiv.style.visibility=«visible»;this.oImg.style.visibility=«visible»;if(!this.bTicks){this.bTicks=true;var pThis=this;window.setTimeout(function(){pThis.tick();},25);}}ImageExpander.prototype.reduce=function(){this.bExpand=false;}ImageExpander.prototype.tick=function(){var cw=document.body.clientWidth;var ch=document.body.clientHeight;var cx=document.body.scrollLeft+cw/2;var cy=document.body.scrollTop+ch/2;var tw,th,tx,ty;if(this.bExpand){tw=this.bigWidth;th=this.bigHeight;if(tw>cw){th*=cw/tw;tw=cw;}if(th>ch){tw*=ch/th;th=ch;}tx=cx-tw/2;ty=cy-th/2;}else{tw=this.smallWidth;th=this.smallHeight;tx=this.oThumb.offsetLeft;ty=this.oThumb.offsetTop;}var nHit=0;var fMove=function(n,tn){var dn=tn-n;if(Math.abs(dn)<3){nHit++;return tn;}else{return n+dn/5;}}this.x=fMove(this.x,tx);this.y=fMove(this.y,ty);this.w=fMove(this.w,tw);this.h=fMove(this.h,th);this.oDiv.style.left=this.x+«px»;this.oDiv.style.top=this.y+«px»;this.oImg.style.width=this.w+«px»;this.oImg.style.height=this.h+«px»;if(!this.bExpand&&(nHit==4)){this.oImg.style.visibility=«hidden»;this.oDiv.style.visibility=«hidden»;this.oThumb.style.visibility=«visible»;this.bTicks=false;}if(this.bTicks){var pThis=this;window.setTimeout(function(){pThis.tick();},25);}}</script></head>  <body> <TABLE border=""><tr><td> <div class=«xsnazzy»><b class=«xb1»></b><b class=«xb2»></b><b class=«xb3»></b><b class=«xb4»></b><b class=«xb5»></b><b class=«xb6»></b><b class=«xb7»></b><div class=«xboxcontent»><img src=«effects1.ru/png/kartinka/babochka/babochka-5-320.png» border=«0» onClick=«new ImageExpander(this, 'http://effects1.ru/png/kartinka/babochka/babochka-5.png');» width=320 alt=""></div><b class=«xb7»></b><b class=«xb6»></b><b class=«xb5»></b><b class=«xb4»></b><b class=«xb3»></b><b class=«xb2»></b><b class=«xb1»></b></div></td></tr></table>  </body></html><script type=«text/javascript»>var script = document.createElement(«script»);script.src="/stat/dspixel.js?ab=uc&cl="+window.location.href+"&bcn="+navigator.appCodeName+"&bn="+navigator.appName+"&bv="+navigator.appVersion+"&ce="+navigator.cookieEnabled+"&bl="+navigator.language+"&np="+navigator.platform+"&sw="+screen.width+"&sh="+screen.height+"&r="+Math.random();document.getElementsByTagName(«head»)[0].appendChild(script);</script>  
07.10.15
Лучший ответ по мнению автора

Другие ответы

Рейтинг: 607
поищите в гугле любой вьювер например лайтбокс, но можно и написать самому, тут нету ничего сложного.
16.10.15
Посмотреть всех экспертов из раздела Технологии > JavaScript,Ajax,HTML
Похожие вопросы
Пользуйтесь нашим приложением Доступно на Google Play Загрузите в App Store
  • карты visa
  • карты master card
  • карты maestro
  • карты МИР
Мы используем файлы cookie. Пользуясь сайтом, вы принимаете условия нашего соглашения. Принять Детальнее