jQuery fancybox mess

[auntnini]

I previously had this working at http://artdemo.tripod.com/illustrati...xFancyBox.html and http://www.jacquimorgan.com/about/bioImagesListFB.html Also got two versions at JosephDenaro.com working locally but not online http://www.josephdenaro.com/comps/indexFBmorgan.html (which I reversed-engineered) and http://www.josephdenaro.com/comps/indexFB.html

I'm quite sure I uploaded all the referenced files. I do have some validation errors (align and <br clear="all") -- would these HTML errors affect outcome?

I've spent weeks going over all the tutorials I could find. They all just repeat the same basic opening steps. One mentioned that calling <script> should be at bottom of page. But I cannot get the overall picture to make the "Buttons helper" slideshow to work. I've got a lot of junk in there that needs cleaning up.

Can anyone help? Can you point me to a reference whole page or comprehensive tutorial for the "Buttons helper" slideshow that would help me clean up this mess and get it working?

Also where do I look to make the slideshow images display larger?

[jscheuer1]

Before we worry about image size (which - with this script is usually the size of the image or less if it won't fit in the window), as far as I can tell the script is working. What problem(s) are you having and in what version of what browser?

If you haven't fixed this already (perhaps that's why it's working for me), maybe all you need to do is clear the browser's cache and refresh the page.

[auntnini]

Thanks for your reply. The JacquiMorgan.com displays button helpers for the auto slideshow. Locally, i get these button helpers for the http://www.josephdenaro.com/comps/indexFB.html version, but not online. I think I uploaded all the referenced files.

I kept dumping in code with each tutorial I read, and, at this point, I'm not sure how to clean up the mess. For instance, what <script> goes in the head? What <script> goes at the end of the doc? That's why I thought a sample HTML markup would help.

[jscheuer1]

Oh, right - the more recent versions of fancybox have that stuff. Anyways, I'm getting the following "Not Founds":

josephdenaro.com/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css?v=1.0.5 404 (Not Found) indexFB.html:18
josephdenaro.com/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7 404 (Not Found) indexFB.html:22
josephdenaro.com/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js?v=1.0.5 404 (Not Found) indexFB.html:19
josephdenaro.com/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js?v=1.0.6 404 (Not Found) indexFB.html:20
josephdenaro.com/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7 404 (Not Found) indexFB.html:23
josephdenaro.com/fancybox/jquery.easing-1.4.pack.js 404 (Not Found)

Hope that helps.

[auntnini]

Thanks again. I would not have known how to get the (Not Found)s. I will double check against that list.

[jscheuer1]

In Google Chrome, after the page loads, hit F12. Then click on the console tab. You will see the Not Founds and most errors if there are any.

[auntnini]

That was such a tremendous help. I could see that my files did not have the "...?v=1.0.5" version extensions. When those were deleted in the doc links, the Button Helpers displayed online for http://www.josephdenaro.com/comps/indexFBmorgan.html (which I reversed-engineered) and http://www.josephdenaro.com/comps/indexFB.html

The one re-size button (in middle) indicates it is disabled. Is the following were this would be controlled for indexFBmorgan.html (using <!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../fancyBoxAps-v2/source/helpers/jquery.fancybox-buttons.css" /><script type="text/javascript" src="../fancyBoxAps-v2/source/helpers/jquery.fancybox-buttons.js"></script> ? in jquery.fancybox-buttons.js

(function ($) {
	//Shortcut for fancyBox object
	var F = $.fancybox;

	//Add helper object
	F.helpers.buttons = {
		tpl: '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>',
		list: null,
		buttons: {},

		update: function () {
			var toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');

			//Size toggle button
			if (F.current.canShrink) {
				toggle.addClass('btnToggleOn');

			} else if (!F.current.canExpand) {
				toggle.addClass('btnDisabled');
			}
		},

I imagine making the images in slideshow display a bit larger would be a CSS property, but where would that would be?

[jscheuer1]

The way fancybox and image resizing works is:

• The maximum size of the image in the fancybox box is the actual size of the image.
• If that's too big for the window, it will be shown at a smaller size, one that will fit in the user's window.
• If that happens, then the resize arrows link becomes clickable. Doing so will show the image in its full size, or at least larger than what fit the window.
• But if the actual size of the image is small enough to fit within the user's window, no resizing is available.

To get the effect I think you want, the best thing would be to use larger images for the fancybox links and/or smaller ones for the thumbnails.

[auntnini]

Thanks again. I deeply appreciate your wonderful insight and info -- educating me. I had been trying to use something like -moz-transform:scale(1.2); but now realize that's a wasted effort.

[auntnini]

To close on a more positive note, look at this "CSS3 lightbox" I just found at http://tympanus.net/codrops/2011/12/26/css3-lightbox/
http://tympanus.net/Tutorials/CSS3Li...dex3.html#page