Показать сообщение отдельно
  #7 (permalink)  
Старый 07.03.2014, 02:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Zuenf,
если интересно
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
  <style type="text/css">
  .google{
    font-size: 24px;
    color: #FFFFFF;
  }
  </style>
  <script src='http://code.jquery.com/jquery-latest.js'></script>
  <script>(function(){var a,k,l;a=jQuery;l=function(){function a(){this.fadeDuration=500;this.fitImagesInViewport=!0;this.resizeDuration=700;this.showImageNumberLabel=!0;this.wrapAround=!1}a.prototype.albumLabel=function(b,c){return"Image "+b+" of "+c};return a}();k=function(){function d(b){this.options=b;this.album=[];this.currentImageIndex=void 0;this.init()}d.prototype.init=function(){this.enable();return this.build()};d.prototype.enable=function(){var b=this;return a("body").on("click","a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]", function(c){b.start(a(c.currentTarget));return!1})};d.prototype.build=function(){var b=this;a("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo(a("body")); this.$lightbox=a("#lightbox");this.$overlay=a("#lightboxOverlay");this.$outerContainer=this.$lightbox.find(".lb-outerContainer");this.$container=this.$lightbox.find(".lb-container");this.containerTopPadding=parseInt(this.$container.css("padding-top"),10);this.containerRightPadding=parseInt(this.$container.css("padding-right"),10);this.containerBottomPadding=parseInt(this.$container.css("padding-bottom"),10);this.containerLeftPadding=parseInt(this.$container.css("padding-left"),10);this.$overlay.hide().on("click", function(){b.end();return!1});this.$lightbox.hide().on("click",function(c){if(a(c.target).hasClass("google"))return!0;"lightbox"===a(c.target).attr("id")&&b.end();return!1});this.$outerContainer.on("click",function(c){"lightbox"===a(c.target).attr("id")&&b.end();return!1});this.$lightbox.find(".lb-prev").on("click",function(){0===b.currentImageIndex?b.changeImage(b.album.length-1):b.changeImage(b.currentImageIndex-1);return!1});this.$lightbox.find(".lb-next").on("click",function(){b.currentImageIndex=== b.album.length-1?b.changeImage(0):b.changeImage(b.currentImageIndex+1);return!1});return this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){b.end();return!1})};d.prototype.start=function(b){var c,e,d,f,g,h;a(window).on("resize",this.sizeOverlay);a("select, object, embed").css({visibility:"hidden"});this.$overlay.width(a(document).width()).height(a(document).height()).fadeIn(this.options.fadeDuration);this.album=[];d=0;if(c=b.attr("data-lightbox"))for(h=a(b.prop("tagName")+'[data-lightbox="'+ c+'"]'),e=f=0,g=h.length;f<g;e=++f)c=h[e],this.album.push({link:a(c).attr("href"),title:a(c).data("link")?'<a href="'+a(c).data("link").href+'" class="google">'+a(c).data("link").text+"</a>":a(c).attr("title")}),a(c).attr("href")===b.attr("href")&&(d=e);else if("lightbox"===b.attr("rel"))this.album.push({link:b.attr("href"),title:b.attr("title")});else for(h=a(b.prop("tagName")+'[rel="'+b.attr("rel")+'"]'),e=f=0,g=h.length;f<g;e=++f)c=h[e],this.album.push({link:a(c).attr("href"),title:a(c).attr("title")}), a(c).attr("href")===b.attr("href")&&(d=e);c=a(window);b=c.scrollTop()+c.height()/10;c=c.scrollLeft();this.$lightbox.css({top:b+"px",left:c+"px"}).fadeIn(this.options.fadeDuration);this.changeImage(d)};d.prototype.changeImage=function(b){var c,e,d=this;this.disableKeyboardNav();c=this.$lightbox.find(".lb-image");this.sizeOverlay();this.$overlay.fadeIn(this.options.fadeDuration);a(".lb-loader").fadeIn("slow");this.$lightbox.find(".lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption").hide(); this.$outerContainer.addClass("animating");e=new Image;e.onload=function(){var f,g;c.attr("src",d.album[b].link);a(e);c.width(e.width);c.height(e.height);d.options.fitImagesInViewport&&(f=a(window).width(),g=a(window).height(),f=f-d.containerLeftPadding-d.containerRightPadding-20,g=g-d.containerTopPadding-d.containerBottomPadding-110,e.width>f||e.height>g)&&(e.width/f>e.height/g?(g=f,f=parseInt(e.height/(e.width/g),10)):(f=g,g=parseInt(e.width/(e.height/f),10)),c.width(g),c.height(f));return d.sizeContainer(c.width(), c.height())};e.src=this.album[b].link;this.currentImageIndex=b};d.prototype.sizeOverlay=function(){return a("#lightboxOverlay").width(a(document).width()).height(a(document).height())};d.prototype.sizeContainer=function(b,c){var a,d,f=this;this.$outerContainer.outerWidth();this.$outerContainer.outerHeight();d=b+this.containerLeftPadding+this.containerRightPadding;a=c+this.containerTopPadding+this.containerBottomPadding;this.$outerContainer.animate({width:d,height:a},this.options.resizeDuration,"swing"); setTimeout(function(){f.$lightbox.find(".lb-dataContainer").width(d);f.$lightbox.find(".lb-prevLink").height(a);f.$lightbox.find(".lb-nextLink").height(a);f.showImage()},this.options.resizeDuration)};d.prototype.showImage=function(){this.$lightbox.find(".lb-loader").hide();this.$lightbox.find(".lb-image").fadeIn("slow");this.updateNav();this.updateDetails();this.preloadNeighboringImages();this.enableKeyboardNav()};d.prototype.updateNav=function(){this.$lightbox.find(".lb-nav").show();1<this.album.length&& (this.options.wrapAround?this.$lightbox.find(".lb-prev, .lb-next").show():(0<this.currentImageIndex&&this.$lightbox.find(".lb-prev").show(),this.currentImageIndex<this.album.length-1&&this.$lightbox.find(".lb-next").show()))};d.prototype.updateDetails=function(){var b=this;"undefined"!==typeof this.album[this.currentImageIndex].title&&""!==this.album[this.currentImageIndex].title&&this.$lightbox.find(".lb-caption").html(this.album[this.currentImageIndex].title).fadeIn("fast");1<this.album.length&& this.options.showImageNumberLabel?this.$lightbox.find(".lb-number").text(this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn("fast"):this.$lightbox.find(".lb-number").hide();this.$outerContainer.removeClass("animating");this.$lightbox.find(".lb-dataContainer").fadeIn(this.resizeDuration,function(){return b.sizeOverlay()})};d.prototype.preloadNeighboringImages=function(){var b;this.album.length>this.currentImageIndex+1&&(b=new Image,b.src=this.album[this.currentImageIndex+1].link); 0<this.currentImageIndex&&(b=new Image,b.src=this.album[this.currentImageIndex-1].link)};d.prototype.enableKeyboardNav=function(){a(document).on("keyup.keyboard",a.proxy(this.keyboardAction,this))};d.prototype.disableKeyboardNav=function(){a(document).off(".keyboard")};d.prototype.keyboardAction=function(b){var a;a=b.keyCode;b=String.fromCharCode(a).toLowerCase();27===a||b.match(/x|o|c/)?this.end():"p"===b||37===a?0!==this.currentImageIndex&&this.changeImage(this.currentImageIndex-1):"n"!==b&&39!== a||this.currentImageIndex===this.album.length-1||this.changeImage(this.currentImageIndex+1)};d.prototype.end=function(){this.disableKeyboardNav();a(window).off("resize",this.sizeOverlay);this.$lightbox.fadeOut(this.options.fadeDuration);this.$overlay.fadeOut(this.options.fadeDuration);return a("select, object, embed").css({visibility:"visible"})};return d}();a(function(){var a;a=new l;return new k(a)})}).call(this);</script>
</head>

<body>
<a title="нормальная подсказка" data-link='{"href":"http://javascript.ru/forum/","text":"ссылка на форум"}' data-lightbox="set1" href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"  ><img alt="" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></a>
<a title="нормальная подсказка" data-link='{"href":"http://javascript.ru/forum/","text":"ссылка на форум"}' data-lightbox="set1" href="http://javascript.ru/forum/images/smilies/agree.gif"  ><img alt="" src="http://javascript.ru/forum/images/smilies/agree.gif"></a>
</body>
</html>
Ответить с цитированием