82434

Use image alt for Fancybox captions

Question:

I am trying to use the title or 'alt' attribute of images to come up as titles with FancyBox. Here is the relevant code:

$("a[rel=fancybox]").fancybox({ 'transitionIn' : 'fade', 'transitionOut' : 'elastic', 'titlePosition' : 'inside', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Look ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>'; }, 'autoScale':false, 'mouseWheelNavigation': false, 'onComplete' : function() {$("#fancybox-wrap").unbind('mousewheel.fb');} , }); });

Answer1:

It seems to me that you are using fancybox v1.3.4, aren't you?.

To learn how fancybox's titles work in that version <a href="http://groups.google.com/group/fancybox/browse_thread/thread/7f2777fca8335aa4/" rel="nofollow">check this post</a>.

To set the fancybox title from the alt attribute of your thumbnail, use the API option titleFromAlt. You can learn how to use it from <a href="http://groups.google.com/group/fancybox/browse_thread/thread/3da14d88af2393cc/" rel="nofollow">this post</a>

Answer2:

I have made something like this (ver:1.3.4)

$("#modal_informations a[rel='fancy']").fancybox({ 'titleFormat': function(title, currentArray, currentIndex, currentOpts) { if ($(currentArray[currentIndex]).find('img').length > 0) { return '<span id="fancybox-title-inside">' + (currentIndex + 1) + ' / ' + currentArray.length + ' ' + $(currentArray[currentIndex]).find('img').attr('alt') + '</span>'; } return '<span id="fancybox-title-inside">' + (currentIndex + 1) + ' / ' + currentArray.length + '</span>'; } });

Answer3:

jQuery("a.fancybox").fancybox({ 'titlePosition':'inside', 'titleFormat': fancyTitle });

// get img alt inside of the fancybox a and overwrite the a title with the img alt inside (dom stays the same, only visible text in the fancybox get changed)

function fancyTitle(title, currentArray, currentIndex, currentOpts){ // get current href of a (target image) var currHref = jQuery(currentArray[currentIndex]).attr('href'); // select a by target img url return jQuery('a[href="'+currHref+'"]').find('img').attr('alt'); }

Recommend

  • Flutter WebView Plugin - How To Handle Local Storage Variables
  • openerp when in view mode fields lose context
  • Change listview adapter to recycler view adapter
  • Delete Google or Facebook User from Firebase
  • GDPR - anonymize IP in nginx (last octet %2=0)
  • hyperledger-composer v1.1:unable to instantiate chaincode
  • ANDROID - Remove extra space of listview header image
  • Group by user and show latest in MYSQL not working
  • delay app release on the App Store
  • Is xmm8 register value preserved across calls?
  • /.git/hooks/: No such file or directory protocol error: expected control record on Mac osx
  • Input field doesn't receive keyboard events when rendering with value property?
  • Linq-to-SQL to search only DATE portions of a date
  • Grouping via an element in hash [closed]
  • Escape awk special character in Python
  • Vue.js 2: Vue cannot find files from /assets folder (v-for)
  • In metro, get all inherited classes of an (abstract) class?
  • How do I use libcurl to printf a remote FTP directory listing?
  • Year over Year Stats from a Crossfilter Dataset
  • Ruby regex for matching simpliest Ruby's regexes
  • Problems to understand DXGI DirectX 11 Desktop Duplication to get a Buffer or Array
  • Why is ordered choice in pyparsing failing for my use case?
  • Calculate time from document
  • 'url' requires a non-empty first argument. The syntax changed in Django 1.5, see the docs
  • Amazon Elastick BeanStalk error: Failed to create the AWS Elastic Beanstalk application version
  • Google App Engine Datastore: Dealing with eventual consistency
  • Debug `Unexpected end of JSON input Error` on content script
  • Functions by reference or by variable, which to use when?
  • How to get rgb from transparent pixel in js
  • Bitrate JWplayer
  • How to use FirstOrDefault inside Include
  • How do I use TagLib-Sharp to write custom (PRIV) ID3 frames?
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • CAS 4 - Not able to retrieve the LDAP groups after successful authentication
  • Running R's aov() mixed effects model from Python using rpy2
  • Access to a Matlab gui from the web
  • ReferenceError: TextEncoder is not defined
  • JavaScript RegExp Replace