Rather than to having to specify a REL or CLASS for each image to trigger Lightbox2, is it possible to do automated LINK (not only restricted to images) handling by jQuery class specification? I'm thinking along the lines of inserting Javascript in page.tpl.php such as the following:

<script type="text/javascript">
	$(document).ready(function() {	
		// Lightbox: images
		$("a.CLASS_OR_ID_OF_CHOICE").lightbox( {
			'hideOnContentClick': true
.. MORE PARAMETERS HERE...
		});
		// Lightbox: iframes
		$("a.CLASS_OR_ID_OF_CHOICE").lightbox( {
			'frameWidth': 800,
			'frameHeight': 600
.. MORE PARAMETERS HERE...
		});	
	}); 
</script>

And is there a list of parameters/options I can refer to?

Documentation?

Any help or advice much appreciated!

Comments

spiffyd’s picture

spiffyd commented
Title: jQuery Javascript Paramenters for Lightbox2? » jQuery Javascript Parameters for Lightbox2 for Automated Link Handling
stella’s picture

stella commented
Status: Active » Postponed (maintainer needs more info)

I'm not totally sure I follow your request. You want to enable the lightbox2 functionality for all links? Regardless of their class or id? Or do you want to duplicate the "automatic image handling" functionality for other links? An example of the type of link you want to handle would be useful.

spiffyd’s picture

spiffyd commented

Allow me to clarify...

The "automatic image handling" functionality in the current module has two issues:

1) It only allows me to specify classes for IMAGES (<img>) only, not links (<a>)

2) It requires me to manually insert a class inside all image tags I want to have lightbox functionality. This is not practical because there are cases where it's not practical or I cannot manually insert the class (i.e. enabling lightbox2 in other modules - I do not want to make changes to the module's hard code just so I can have Lightbox2 support).

For instance, if I have an classless image within a container with id name "SAMPLECONTAINER", there's no way I get lightbox2 to work.

The simple solution, therefore would be to allow the user to specify the links (or images) via CSS that should trigger lightbox2. This essentially allows Lightbox2 to support EVERYTHING that can be identified via CSS.

So for the above example, I'd like to be able to trigger lightbox2 with #SAMPLECONTAINER a by telling the module to lightbox all links within SAMPLECONTAINER.

Furthermore, if options/parameters can be specified for each "CSS trigger" this would allow me to customize the lightbox for each trigger.

This is what a similar script called "FancyBox" allows for - a feature I'm not sure Lightbox2 module has. Check out http://fancy.klade.lv at #3 "Use the plugin" section for a simple sample/demo of the jQuery code.

I'm sure jQuery-based Lightbox2 can achieve something similar to this though as I've found this which essentially resembles the CSS-based initialization/trigger FancyBox uses.

I hope this clarifies my question. Please do not hesitate to ask me if you have further questions!

Regards,

Denis

spiffyd’s picture

spiffyd commented
Title: jQuery Javascript Parameters for Lightbox2 for Automated Link Handling » Automated CSS-based initialization/triggers for jQuery Lightbox2 Link/Image Handling?
spiffyd’s picture

spiffyd commented

Any advice?

stella’s picture

stella commented
Version: 6.x-1.8 » 6.x-1.x-dev
Category: support » feature
Priority: Critical » Normal
Status: Postponed (maintainer needs more info) » Active

Lightbox2 is designed to work on links. The automatic image handling feature is aimed at integrating images from other modules where you do not have the ability to modify the html generated. Each of these modules usually give their images a distinct class, which is how lightbox2 knows whether those images should be displayed in a lightbox or not. Lightbox2 also does some other stuff, like determining the path to the original larger image, etc. Hence the "automatic image handling" feature. If there's an image provided by a Drupal contrib module which isn't supported by lightbox, please let me know.

Your request is somewhat different. You want to be able to specify classes on divs, etc, that would cause the triggering of a lightbox when any links within that div are clicked. It's possible, but it won't be as "clever" a feature as the automatic image handling one is. All lightbox2 will be able to do is to add a rel="lightbox" (or similar) to the anchor/link tag. It won't be able to rewrite the urls, etc.

I'll have a go at implementing this in Lightbox2, but I won't be able to look at it for another few weeks.

Cheers,
Stella

spiffyd’s picture

spiffyd commented
Title: Auto Link (<a>) Handling with jQuery CSS-based Triggers similar to Fancy Box » Automated CSS-based initialization/triggers for jQuery Lightbox2 Link/Image Handling?

Stella,

Thank you so much for your reply!

When you say "Lightbox2 is designed to work on links", I assume you mean human/manually generated content links. After all, the user can specify the REL tag in whatever link they choose. That's great and has been working just fine. But what I think is lacking in the current module has to do with its automatic image handling feature. After all, it only auto handles images, and not links.

I believe this is very limiting. Consider the following examples which the current version won't be able to implment Lightbox/Lightframes for:

1) What if we want a Lightframe/Lightbox from a link where we cannot manually specify a REL property?
EX: I want a lightframe when one specific Drupal primary link is clicked. I can't tack on a REL lag to that link so I can't trigger a Lightframe.
2) What if this is a module-generated text link?
3) What if this is a module-generated image where we can't specify a class without hardcoding the module?
4) What if only a link class is only given? Current Lightbox2 is designed to trigger image classes.
5) What if images are displayed via CSS or style backgrounds in links or linked containers? Once again it we need a auto link trigger.

A auto link handler would resolve all these problems. And thus, I think auto link handling is more powerful than auto image handling. Please correct me if I'm wrong or have overlooked anything!

An additional point I wanted to make in my "request" is that the current auto image handling tab is also limiting because it limits the user to use ONE KIND OF HANDLER (i.e. Lightbox, Lightbox Grouped, HTML Content, etc.) for an unlimited # of image trigger classes. What if the user wants different handlers for various classes?

Lastly, in my "request" I've mentioned Fancy Box because I think the way it implements auto link handling is very clever because it allows the user to specify which link she wants to trigger a Lightbox or Lightframe. Each triggered Lightbox or Lightframe can also be configured however the user desires simply by specifying parameters via jQuery such as those shown on http://fancy.klade.lv.

It's so simple that I don't think a nice Drupal Admin Settings GUI needs to be developed for this to work! All the user needs to do is place the JS script-based CSS triggers and parameters any where in the HTML (can be done locally such as inserting the script in a node field for instance, or more globally such as placing the script in page-tpl.php). Simple as that!

I'd like to hear what you think...

Many thanks once again for a wonderful module!

Denis

spiffyd’s picture

spiffyd commented
Title: Automated CSS-based initialization/triggers for jQuery Lightbox2 Link/Image Handling? » Auto Link (<a>) Handling with jQuery CSS-based Triggers similar to Fancy Box

More simple title! :)

stella’s picture

stella commented
Title: Automated CSS-based initialization/triggers for jQuery Lightbox2 Link/Image Handling? » Auto Link (<a>) Handling with jQuery CSS-based Triggers similar to Fancy Box
Status: Active » Postponed

postponing until after next release

spiffyd’s picture

spiffyd commented

Stella,

Thanks for the update. I'll be happy to do extensive beta testing for any of your devs.

Denis

wretched sinner - saved by grace’s picture

wretched sinner - saved by grace commented

subscribe