Best "box"?

[auntnini]

I've read "Lightbox Bad, SlimBox Good" http://www.dynamicdrive.com/forums/blog.php?b=247, which says that Slimbox is better to use than Lightbox because of jQuery. I also think I saw posts touting Fancy Box. Are there others? So I wonder, which is the best and/or simplest "box" to use?

http://www.digitalia.be/software/slimbox2
http://fancyapps.com/fancybox/

[jscheuer1]

Before I actually comment, the choice of whether to use one script library or another, like jQuery, Prototype, MooTools, Dojo, or others depends on a number of things about the specific project and about the people doing the coding. These libraries can sometimes be combined, but in most cases that's a waste of code, and is often simply impossible. They duplicate each other so much and often conflict in an irresolvable fashion.

Once you pick one, best to stick with it.

As to the question - Lightbox alternatives with a focus mostly on jQuery Lightbox alternatives:

I currently favor FancyBox 1.3.4 which is distributed in the archive jquery.fancybox-1.3.4.zip. Also available (for now) from this page:

http://fancybox.net/

I strongly suggest you get a copy while it's still available.

I haven't checked out version 2+ because it's no longer totally free. I bet it's probably very good, and it's still free for personal and non-profit use. I'm just uncomfortable recommending or delving into something like that because there's such a gray area as to what's what as far as free usage and/or modification goes. I think a program/script should either be all free or all commercial.

Anyways, it's (FancyBox 1.3.4) not all that easy to use, unless of course you just want one of the demo configurations, like its similar to Lightbox type applications. But, if you're familiar with jQuery and javascript, it's extremely versatile and powerful. The more familiar you get with it, the easier it becomes to bend it to your purposes. It can do and/or be adapted to do almost anything you might want a modal window script to do.

Slimbox is great if all you're interested in is a jQuery replacement for Lightbox. It's look and feel is all but identical. And because it doesn't do anything much more than Lightbox does, it's pretty easy to deal with.

There are other choices out there. ColorBox (jQuery based) and LightWindow (Prototype based) come to mind. But I don't think either combines versatility and economy of code as well as FancyBox. Their (all three's) ease of use is similar though. There may well be some real finds out there that I've missed. I've seen a lot of others, but none have impressed me enough to even remember their names. Except jQuery Lightbox, which is a lot like SlimBox, but just not as good in my opinion.

Researching these type of scripts is an interest of mine. But I'm by no means an expert on the topic. So feel free to do your own research and draw your own conclusions.

[traq]

I prefer ColorBox. I'm also using Reveal nowadays - mostly because I've started experimenting with Foundation, and it's bundled - it's nice.

[auntnini]

Thank you both for your helpful information / education. Not being a dedicated OPPy programmer, more than two pages of code makes me dizzy so all the Lightbox backup put me off and I am just now dipping into library slideshows.

http://foundation.zurb.com/ "...flexible framework for building prototypes and production code" sounds way over my head, and search for "Reveal" didn't reveal much. http://jacklmoore.com/colorbox/ "ColorBox: A lightweight customizable lightbox plugin for jQuery 1.3+" -- sounds comparable to SlimBox? I did not see a setInterval (or whatever timer) option in SlimBox demo.

Guess jQuery FancyBox is best fit for me, as first experimented with at http://artdemo.tripod.com/illustrati...xFancyBox.html. But I don't like "tagging" each individual <img> -- e.g., <a class="fancybox-buttons" data-fancybox-group="button" ...> or <a class="fancybox-thumbs" data-fancybox-group="thumb" rel="fancybox" ...>, as is also the case with "Magnifier" <img class="magnify" ...> at http://www.auntnini.com/ddScripts/magnifier.html. Wish there were a way codify all images in <div>.

My underlying mission is to develop various ways of displaying multiple image samples for photographers, illustrators, painters, designers. I actually do not like the "box" effect and would like to just emulate the navigation keypress, timer and magnify aspects of FancyBox in a regular slideshow -- e.g., http://www.auntnini.com/sketch/newRolls.html. Being able to navigate with arrow keys, spacebar, etc. -- instead of clicking mouse -- is extemely appealing. At the end of the day (even with Wacom tablet and stylus), one more click can break your wrist.

[jscheuer1]

You can use FancyBox to init an entire div or entire divs full of images without having to tag each one. Here's a basic working demo of the concept that can be run from the root folder of the demo package:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
jQuery(function($){
				$(".group1 a").attr('rel', 'group1').fancybox({});
});
</script>
</head>
<body>
<div class="group1">
		<a href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
		<a href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
		<a href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
		<a href="./example/12_b.jpg" title=""><img alt="" src="./example/12_s.jpg" /></a>
</div>
</body>
</html>

The highlighted part makes them a gallery. If you want them to each be separate (no next/previous buttons), just skip it.

Oh, and by the way, ColorBox is on a par with FabcyBox, both scripts having many more options than SlimBox. But I think the FancyBox user interface is more easily configured. That's not to say it's a snap, just easier then ColorBox, at least for certain things.

[auntnini]

Thanks again. I have been trying this at http://artdemo.tripod.com/illustration/indexFB.html (unsuccessfully so far).

I will continue to work on this ... just wanted to let you know that I am trying and appreciate the info input.

[jscheuer1]

It appears to be working here in Opera. However, there's an annoying popup ad (probably added by the host) with the first click. The code for that might be messing up the entire script in other browsers. I'd get off of tripod.com if I could. I haven't seen anyone participating in the forums using them in ages. But as I recall, they did stuff like that - adding their own code to pages for ads and other reasons, often messing up scripts.

And I see you're using FancyBox version 2.0.4. As I said before, although I'm sure it's a very good script, I don't vouch for it. It's new as well, so might have some bugs yet to be worked out. And it's not free for commercial purposes. I recommend version 1.3.4 as mentioned and linked to in my first post in this thread. It's free for all purposes. The user interface is a little different than the version you're using though - something to consider.

[auntnini]

Ah! I just used fancyapps-fancyBox-83bf93f and fancyapps-fancyBox-v2.0.4-0-g81c12d7.zip from the demo page.

/*!
* fancyBox - jQuery Plugin
* version: 2.0.4 (12/12/2011)
* @requires jQuery v1.6 or later
* Examples at http://fancyapps.com/fancybox/
* License: www.fancyapps.com/fancybox/#license
* Copyright 2011 Janis Skarnelis - janis@fancyapps.com
*/

This was my very first stab at FancyBox. But, I did take your advice and downloaded jquery.fancybox-1.3.4.zip

Tripod.com banner, footer, and pop-up ads are annoying, but it was a good FREE host that had a built-in File Manager and also allowed use of an independent FTP tool (such as Dreamweaver). Their new accounts do not provide those features any more, but I can still use Dreamweaver on an old demo site such as http://artdemo.tripod.com. A FREE alternative for demos with a FileManager (allowing you to upload your own content) is http://www.webs.com -- e.g., http://auntnini.webs.com

I'm going to take a break from "boxes" until I do more basic jQuery reading.

Thanks again for all your help.

[jscheuer1]

I just ran across another one of these jQuery based Lightbox type scripts that looks very nice and it's free for all purposes. It's called Pretty Photo:

http://www.no-margin-for-errors.com/.../#!prettyPhoto

I haven't looked into it enough to really vouch for it, but the demo's are quite impressive and the API looks very flexible.