Posted 8 months ago #
Hi,
I'm using Easy Fancybox in conjunction with NG Gallery. A few days ago titles stopped being displayed, but I noticed only after a while so I don't know what might have changed.
Looking at the code, the #fancybox-title div is empty, but the images are fine, each one of them has the string I want to display in both 'title' and 'alt' properties. I tried with and without the textFromAlt option, nothing changes.
Thanks for any help or suggestion!
Posted 8 months ago #
Additional info that could be useful: descriptions are printed fine, only titles are missing.
Hi bardo, a link would be most heplful :)
Posted 8 months ago #
Hi RavanH, and thanks for answering.
I'm sorry, but the site is not public yet, so I can't send you a link. However, I can paste you some code.
Here's the thumbnail part:
<div class="entry-content">
<div id="ngg-gallery-13-409" class="ngg-galleryoverview">
<div id="ngg-image-50" class="ngg-gallery-thumbnail-box">
<div class="ngg-gallery-thumbnail">
<a class="fancybox" rel="gallery-0" title=" "href="http://testsite.tld/wp-content/blogs.dir/3/files/my-gallery/image-01.jpg">
<img width="100" height="75" src="http://testsite.tld/wp-content/blogs.dir/3/files/my-gallery/thumbs/thumbs_image-01.jpg" alt="Image title" title="Image title">
</a>
</div>
</div>
</div>
</div>And here's the part generated by easy-fancybox (note that the two plugins are configured to work together as described in the easy fancybox' documentation, and they actually worked for a month or two in the same multisite environment):
<div id="fancybox-wrap" style="display: block; width: 225px; height: auto; top: 145px; left: 499px;">
<div id="fancybox-outer">
<div id="fancybox-bg-n" class="fancybox-bg"></div>
<div id="fancybox-bg-ne" class="fancybox-bg"></div>
<div id="fancybox-bg-e" class="fancybox-bg"></div>
<div id="fancybox-bg-se" class="fancybox-bg"></div>
<div id="fancybox-bg-s" class="fancybox-bg"></div>
<div id="fancybox-bg-sw" class="fancybox-bg"></div>
<div id="fancybox-bg-w" class="fancybox-bg"></div>
<div id="fancybox-bg-nw" class="fancybox-bg"></div>
<div id="fancybox-content" style="border-width: 10px; width: 205px; height: 309px; opacity: 1;">
<img id="fancybox-img" src="http://testsite.tld/wp-content/blogs.dir/3/files/my-gallery/image-01.jpg" alt=" ">
</div>
<a id="fancybox-close" style="display: inline;"></a>
<a id="fancybox-left" href="javascript:;" style="display: none;">
<span id="fancybox-left-ico" class="fancy-ico"></span>
</a>
<a id="fancybox-right" href="javascript:;" style="display: inline;">
<span id="fancybox-right-ico" class="fancy-ico"></span>
</a>
<div id="fancybox-title" class="fancybox-title-inside" style="display: block; width: 205px; margin-left: 10px; margin-right: 10px;">
<div id="fancybox-title-inside"> </div>
</div>
</div>As you can see, the interesting part is near the end: the "fancybox-title" div is totally empty. Changing the title positioning just changes its subdiv id (which in this case is "fancybox-title-inside") and nothing else. Notice how, in the first block of code, "title" and "alt" are correctly set...
I tested the thumbnail source code on my own site and the title gets shown just fine... Can you copy/paste the fancybox script right after <!-- Easy FancyBox 1.3.4.10 using FancyBox 1.3.4 - RavanH (http://4visions.nl/en/wordpress-plugins/easy-fancybox/) --> in the head of your source?
Posted 8 months ago #
Sure, here it is:
<!-- Easy FancyBox 1.3.4.9 using FancyBox 1.3.4 - RavanH (http://4visions.nl/en/wordpress-plugins/easy-fancybox/) -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'width' : 600, 'height' : 470, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
/* IMG */
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox):not(:empty),a[href$=".JPG"]:not(.nofancybox):not(:empty)';
$(fb_IMG_select).addClass('fancybox');
var fb_IMG_sections = jQuery('article, div.hentry');
fb_IMG_sections.each(function() { jQuery(this).find(fb_IMG_select).attr('rel', 'gallery-' + fb_IMG_sections.index(this)); });
$('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, { 'transitionIn' : 'elastic', 'easingIn' : 'easeOutBack', 'transitionOut' : 'elastic', 'easingOut' : 'easeInBack', 'opacity' : false, 'titleShow' : true, 'titlePosition' : 'inside', 'titleFromAlt' : false }) );
/* YouTube */
$('a[href*="youtube.com/"]:not(.nofancybox):not(:empty)').addClass('fancybox-youtube');
$('a[href*="youtu.be/"]:not(.nofancybox):not(:empty)').addClass('fancybox-youtube');
$('a.fancybox-youtube, area.fancybox-youtube').fancybox( $.extend({}, fb_opts, { 'type' : 'iframe', 'width' : 640, 'height' : 385, 'padding' : 0, 'autoScale' : false, 'titleShow' : false, 'titlePosition' : 'float', 'titleFromAlt' : false, 'onStart' : function(selectedArray, selectedIndex, selectedOpts) { selectedOpts.href = selectedArray[selectedIndex].href.replace(new RegExp('youtu.be', 'i'), 'www.youtube.com/embed').replace(new RegExp('watch\\?v=([a-z0-9]+)(&|\\?)?(.*)', 'i'), 'embed/$1?version=3&$3') } }) );
/* iFrame */
$('a.fancybox-iframe, li.fancybox-iframe a, area.fancybox-iframe, li.fancybox-iframe a').fancybox( $.extend({}, fb_opts, { 'type' : 'iframe', 'width' : 800, 'padding' : 3, 'scrolling' : 'auto', 'autoScale' : false, 'titleShow' : false, 'titlePosition' : 'float', 'titleFromAlt' : false }) );
/* Auto-click */
$('#fancybox-auto').trigger('click');
});
/* ]]> */
</script>
<style type="text/css">.fancybox-hidden{display:none}</style>I noticed you have version "1.3.4.10", I guess it's a development version?
Yes, that's the dev version :)
Anyway, I see the parameter titleFromAlt is set to false. It needs to be true so first please place a check mark at the option 'Allow title from thumbnail alt tag.'
The second step is to make that title=" " disappear from the code generated by NextGen. You see, that FancyBox option will allow the title being taken from the alt attribute but it will not override any title attribute on the link tag. This means that the title will only only be taken from the alt attribute when there is NO title attribute on the link. In your code snippet, there is a title attribute set, even if it's an empty space... FancyBox does not discriminate based on title content.
I'm not sure why NG generates this title=" " in this case and I cannot tell you how to make it go away either. Sorry.
Maybe something for the NG dev to answer?
Posted 8 months ago #
Yeah, I tried both with and without titleFromAlt to see if things changed and forgot to change it back. Anyway, I didn't notice the empty title tag, I'll check with the NGG dev... thanks a lot for your help!
bardo, I tested again with the original link code plus your fancybox header code (with titleFromAlt set to true) and even with the empty title=" " in there, it shows 'Image title' as title.
Can you reproduce the issue on a public page? I really need to know what is happening in terms of other javascript that might be interfering... Seeing it live, will help me a lot.
Posted 3 months ago #
Hi,
I spent about two hours figuring out why I have no titles.
Turns out - they are taken from link tag title, not thumbnail title.
A statement about it in brackets beneath "show title" option might come in handy for slow people like me :)
Hi visnevskis, if you leave the option "Allow title from alt" checked, the title will be taken from the alt text. But you'll have to provide one when inserting the image thumbnail, of course...
You must log in to post.
