Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: jQuery fancybox mess

  1. #1
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default jQuery fancybox mess

    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?
    Last edited by auntnini; 05-16-2014 at 08:45 PM. Reason: lin errors add PS

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    auntnini (05-17-2014)

  4. #3
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Screen Shot 2014-05-17 at 3.31.57 PM.jpg 
Views:	113 
Size:	8.0 KB 
ID:	5461  
    Last edited by auntnini; 05-17-2014 at 07:43 PM. Reason: add helpere buttons screenshot

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    auntnini (05-19-2014)

  7. #5
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

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

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    auntnini (05-19-2014)

  10. #7
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    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

    Code:
    (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?
    Last edited by auntnini; 05-19-2014 at 10:50 PM. Reason: clarify res-size

  11. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    auntnini (05-20-2014)

  13. #9
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    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.

  14. #10
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    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

Similar Threads

  1. jquery image enlarge using fancybox
    By nileshpatil in forum JavaScript
    Replies: 1
    Last Post: 04-19-2014, 02:33 PM
  2. simplegallery.js to work with jquery.fancybox.js
    By bennylondon in forum JavaScript
    Replies: 0
    Last Post: 01-29-2009, 08:04 PM
  3. Over all mess
    By *Warrior* in forum CSS
    Replies: 5
    Last Post: 07-13-2008, 12:33 AM
  4. OK in IE6 - a mess in the rest...
    By N7AS in forum CSS
    Replies: 2
    Last Post: 12-24-2006, 11:47 PM
  5. Tables are a mess! Please advise!
    By atomic-blonde in forum HTML
    Replies: 13
    Last Post: 12-01-2005, 08:30 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •