06.03.2014, 16:08
|
|
Интересующийся
|
|
Регистрация: 05.07.2013
Сообщений: 11
|
|
|
lightbox title не работают ссылки
Всем привет, может есть специалисты по LightBox
Не могу понять, почему не работает ссылка в теге title=""
Способы с заменой html символов не помогло, еще пробовал несколько способов из инета, они тоже не помогли, может здесь кто поможет?
сам шаблон test3.cmski.ru
блок Recent Works нажать на картинку и внизу розовым ссылка. скрин http://shot.qip.ru/00jIPZ-6zuH5Xu7R/
Заранее очень благодарен за любую помощь. |
|
07.03.2014, 00:08
|
|
Интересующийся
|
|
Регистрация: 05.07.2013
Сообщений: 11
|
|
|
Видимо очень сложная задача, раз все стороной проходят.
|
|
07.03.2014, 01:00
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
makissm21,
недоходчиво описано -- ссылка на шаблон должна быть ссылкой вот так http://test3.cmski.ru/
-- решение вашей проблемы - разрешить плагину LightBox реагировать на ссылки -- придумайте метку класс -- если клик по этому классу осуществляем переход -- сам плагин блокирует все клики которые не являются частью его интерфейса.
и тогда будет всё ок!
Последний раз редактировалось рони, 07.03.2014 в 01:33.
|
|
07.03.2014, 02:12
|
|
Интересующийся
|
|
Регистрация: 05.07.2013
Сообщений: 11
|
|
|
Решение дали на другом форуме не давно.
Спасибо за совет.
|
|
07.03.2014, 02:38
|
 |
Кандидат Javascript-наук
|
|
Регистрация: 27.01.2012
Сообщений: 134
|
|
Рони, ты эмулировал стандартное поведение, типа
window.location.replace($(this).attr('href'));
или как-то можно отменить отмену действия по умолчанию?
|
|
07.03.2014, 02:52
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
Zuenf,
поставил в плагин запрет реагировать на ссылки с с определённым классом -- в title добавил класс -
title="<a href=" http://www.google.ru/" class="google" >Ссылка1</a>" -- понял что это неудобно и титле не для этого и сделал
data-link='{"href":"http://www.google.ru/","text":"ссылка"}' - если есть этот атрибут плагин если ему шепнуть формирует ссылку и ненадо портить титле.
|
|
07.03.2014, 03:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
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>
|
|
07.03.2014, 04:49
|
|
Кандидат Javascript-наук
|
|
Регистрация: 27.01.2012
Сообщений: 134
|
|
рони, Ну ты конечно молодец! 
Написал, мне как пользоваться, а что ты добавил в скрипт я полчаса сидел искал.
Сначала думал, что в исходниках lightbox, есть какая то нативная обработка. Не нашел.
Вообще, я не очень знаком был с data-*. Почитал.
Посмотрел в jQuery, есть какие-то функции работающие с такими атрибутами.
Опять начал искать в исходниках lightbox.
Уже практически наизусть их выучил, как решил проверить, может ты там что-то добавил, жму ctr-f, ввожу link, и о чудо(хорошо я исходники наизусть запомнил), я понял что нашел это!
А про титле я вообще сидел в ступоре, и в моей голове: "Что? Зачем? Коим образом он связан с классом?" и т.п. 
Последний раз редактировалось Zuenf, 07.03.2014 в 05:01.
|
|
07.03.2014, 09:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
Zuenf,
|
|
|
|
