Attention : astuce valable pour Fancybox à partir de sa version: 2.1.5 (Fri, 14 Jun 2013).

Source : Need to add a surrounding div to fancybox or add a class to body when clicked

You can bind all your fancyboxes to the same selector so you won’t need to have a different script for each fancybox. You can add an extra class to your links to separate each fancybox like :

Then you can declare different API options of each fancybox in separated variables like :

…and use a single script with the common shared options AND using the afterLoad callback to apply each individual setting, depending on the class as well as adding the corresponding class to the fancybox overlay like

Notice we are adding classes either iphone_300 or iphone_420 to the fancybox overlay, which may have different styles within your own css stylesheet like


when i put these in a rel=gallery, that when i click next it doesnt remove the previous addclass

Just add this as first line inside the afterLoad callback :