Jump to content
Stef's Coding Community
PicnicTutorials

Anyone know of a different Fancy Zoom?

Recommended Posts

Anyone know of a different Fancy Zoom? http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/

 

It's almost perfect as is. I'm just looking for a way (or different plugin?) that performs different when JS is off. I would prefer that it simply links to an outside image (aka http:www.image.jpg). Currently when js is off this particular plugin just lays out all the larger images on that single page.

 

What I DO like about this is that its fast and just zooms the image. In this case I do not require all the bells and whistles. Just a simple bigger image.

 

Thanks!

Share this post


Link to post
Share on other sites

http://fancybox.net/

 

I tried this one without Javascript, and it just shows the thumbnails, when you click on them they just link to the image itself. It's quite fast too, but the thing with this one is from time to time, when you click on the thumbnail, it displays backlinks to the author's website, you need to buy a license to disable that feature I think.

Share this post


Link to post
Share on other sites

Hi thanks! Yeah fancybox is my backup plan. It just requires more customization to look and perform like fancy zoom. Like I have to kill the o relay shadow, round the corners, zoom the image effect with a fake image, etc. I was hoping to find one "out of the box". Or maybe someone could think of an easy way to make fancy zoom link to the outside image? Currently it just calls it by "id". That's prob wy it's so fast.

Share this post


Link to post
Share on other sites

Use this instead of the normal fancyzoom.js

jQuery.fn.fancyZoom = function(options){

 var options   = options || {};
 var directory = options && options.directory ? options.directory : 'images';
 var zooming   = false;

 if ($('#zoom').length == 0) {
   var ext = $.browser.msie ? 'gif' : 'png';
   var html = '<div id="zoom" style="display:none;"> \
                 <table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
                   <tbody> \
                     <tr> \
                       <td class="tl" style="background:url(' + directory + '/tl.' + ext + ') 0 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                       <td class="tm" style="background:url(' + directory + '/tm.' + ext + ') 0 0 repeat-x; height:20px; overflow:hidden;" /> \
                       <td class="tr" style="background:url(' + directory + '/tr.' + ext + ') 100% 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                     </tr> \
                     <tr> \
                       <td class="ml" style="background:url(' + directory + '/ml.' + ext + ') 0 0 repeat-y; width:20px; overflow:hidden;" /> \
                       <td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> \
                         <div id="zoom_content"> \
                         </div> \
                       </td> \
                       <td class="mr" style="background:url(' + directory + '/mr.' + ext + ') 100% 0 repeat-y;  width:20px; overflow:hidden;" /> \
                     </tr> \
                     <tr> \
                       <td class="bl" style="background:url(' + directory + '/bl.' + ext + ') 0 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                       <td class="bm" style="background:url(' + directory + '/bm.' + ext + ') 0 100% repeat-x; height:20px; overflow:hidden;" /> \
                       <td class="br" style="background:url(' + directory + '/br.' + ext + ') 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
                     </tr> \
                   </tbody> \
                 </table> \
                 <a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> \
                   <img src="' + directory + '/closebox.' + ext + '" alt="Close" style="border:none; margin:0; padding:0;" /> \
                 </a> \
               </div>';

   $('body').append(html);

   $('html').click(function(e){if($(e.target).parents('#zoom:visible').length == 0) hide();});
   $(document).keyup(function(event){
       if (event.keyCode == 27 && $('#zoom:visible').length > 0) hide();
   });

   $('#zoom_close').click(hide);
 }

 var zoom          = $('#zoom');
 var zoom_table    = $('#zoom_table');
 var zoom_close    = $('#zoom_close');
 var zoom_content  = $('#zoom_content');
 var middle_row    = $('td.ml,td.mm,td.mr');

 this.each(function(i) {
   $($(this).attr('rel')).hide();
   $(this).click(show);
 });

 return this;

 function show(e) {
e.preventDefault();
   if (zooming) return false;
	zooming         = true;
	var content_div = $($(this).attr('rel'));
 	var zoom_width  = options.width;
	var zoom_height = options.height;

	var width       = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
 	var height      = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
 	var x           = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
 	var y           = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
 	var window_size = {'width':width, 'height':height, 'x':x, 'y':y}

	var width              = (zoom_width || content_div.width()) + 60;
	var height             = (zoom_height || content_div.height()) + 60;
	var d                  = window_size;

	// ensure that newTop is at least 0 so it doesn't hide close button
	var newTop             = Math.max((d.height/2) - (height/2) + y, 0);
	var newLeft            = (d.width/2) - (width/2);
	var curTop             = e.pageY;
	var curLeft            = e.pageX;

	zoom_close.attr('curTop', curTop);
	zoom_close.attr('curLeft', curLeft);
	zoom_close.attr('scaleImg', options.scaleImg ? 'true' : 'false');

   $('#zoom').hide().css({
		position	: 'absolute',
		top				: curTop + 'px',
		left			: curLeft + 'px',
		width     : '1px',
		height    : '1px'
	});

   fixBackgroundsForIE();
   zoom_close.hide();

   if (options.closeOnClick) {
     $('#zoom').click(hide);
   }

	if (options.scaleImg) {
 		zoom_content.html(content_div.html());
 		$('#zoom_content img').css('width', '100%');
	} else {
	  zoom_content.html('');
	}

   $('#zoom').animate({
     top     : newTop + 'px',
     left    : newLeft + 'px',
     opacity : "show",
     width   : width,
     height  : height
   }, 500, null, function() {
     if (options.scaleImg != true) {
   		zoom_content.html(content_div.html());
 		}
		unfixBackgroundsForIE();
		zoom_close.show();
		zooming = false;
   })
   return false;
 }

 function hide() {
   if (zooming) return false;
	zooming         = true;
  $('#zoom').unbind('click');
	fixBackgroundsForIE();
	if (zoom_close.attr('scaleImg') != 'true') {
 		zoom_content.html('');
	}
	zoom_close.hide();
	$('#zoom').animate({
     top     : zoom_close.attr('curTop') + 'px',
     left    : zoom_close.attr('curLeft') + 'px',
     opacity : "hide",
     width   : '1px',
     height  : '1px'
   }, 500, null, function() {
     if (zoom_close.attr('scaleImg') == 'true') {
   		zoom_content.html('');
 		}
     unfixBackgroundsForIE();
		zooming = false;
   });
   return false;
 }

 function switchBackgroundImagesTo(to) {
   $('#zoom_table td').each(function(i) {
     var bg = $(this).css('background-image').replace(/\.(png|gif|none)\"\)$/, '.' + to + '")');
     $(this).css('background-image', bg);
   });
   var close_img = zoom_close.children('img');
   var new_img = close_img.attr('src').replace(/\.(png|gif|none)$/, '.' + to);
   close_img.attr('src', new_img);
 }

 function fixBackgroundsForIE() {
   if ($.browser.msie && parseFloat($.browser.version) >= 7) {
     switchBackgroundImagesTo('gif'); 
   }
}

 function unfixBackgroundsForIE() {
   if ($.browser.msie && $.browser.version >= 7) {
     switchBackgroundImagesTo('png'); 
   }
}
}

 

I changed it so it works with the "rel" attribute instead of the "href"

 

Just drop the target ID (example: #github) inside the "rel" attribute instead of the "href"

 

and drop the actual URL to the image inside the href attribute so it links straight to the image when JS is off.

 

I haven't tested this but it should work. If it doesn't then can u post any Javascript error you get (preferably from Firebug instead of IE Javascript errors lol)

Share this post


Link to post
Share on other sites

Oh, and you need to hide the target divs (the ones with the large images) using CSS "display:none" so they don't show up when JS is off (fancyzoom.js does this automatically but the images show up when JS is off, which is not what we want)

Edited by BeeDev

Share this post


Link to post
Share on other sites

Almost. Here is my test page. http://www.visibilityinherit.com/projects/fancyzoom/index.html

 

With js off it performs perfect. With js on it wont show the image though. In the test page I'm linking to fancyzoom2.js. The original is in the same directory under fancyzoom.js. Thanks BeeDev for your thoughts!

Share this post


Link to post
Share on other sites

I think you forgot to include the image on the page (preferably wrapped with a div with a class AND and ID) and reference the ID of the <div> in the "rel" attribute of the link. (It's just like how you do it normally with Fancyzoom, but you need to put the ID of the div containing the large image in the "rel" attribute of the link instead of the "href")

 

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="js/fancyzoom2.js"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});
	});
</script>
<style type="text/css">.hideMe { display:none; }</style>
</head>
<body> 

		<div class="photo">
			<a href="../../images/family-photo.jpg" rel="#myPhotoDiv">TEST LINK</a>
		</div>
		<div class="hideMe" id="myPhotoDiv">
			<img src="../../images/family-photo.jpg" alt="Family-Photo" />
		</div>
</body> 
</html>

Share this post


Link to post
Share on other sites

Perfect! Thank you very - very much. :) I was thinking we changed it so the image wasnt in the page anymore. And I've never used the rel attribute so I was a little lost. I owe you one. Have a good holiday!

Share this post


Link to post
Share on other sites

No problem, it's not so much about the attributes, i just chose "rel" because it validates and it wasn't being used by anything else :) I personally would use the "data" attribute but it won't validate but it will still work.

 

Have a nice holiday too.

Share this post


Link to post
Share on other sites

OK I'm stuck! This thing has given me the run-arounds. First I had to trouble shoot for a while why it wasnt zooming correctly. Apparently it only works correctly with the older version of jquery. But now I cant figure out a solution to this one...

 

In the fancyzoom script - it inserts all the table stuff around the image right. Take the close icon near the bottom of the table for example. The src is src="' + directory + '/closebox.' + ext + '" which works fine if all my html pages are located within the fancyzoom folder. But as soon as it's not (like with all my real pages) none of the shadows/close icons/etc show up. Aside from putting the fancyzoom.js within each directory/folder is there some way to call it from any location? Man such a rooking question! I tried adding... src="/' but that didnt seem to work. And I also just tried adding the full path - same result. I believe its added in that way because the script feeds different images to different IE browsers. Thanks!

 

EDIT: just tested putting the fancyzoom.js in the same folder as my html pages. That does not work either because now all the images are in a dif folder. Basically I'm trying to keep all the fancyzoom stuff in its own folder. It currently contains...

 

fancyzoom (folder)

....images (folder)

........jpg (image file)

fancyzoom.js (js file)

Edited by Eric

Share this post


Link to post
Share on other sites

Too much protein? :)

 

Seriously. I haven't opened up DW for a few months. I already have to think about all the simple stuff. Good thing I made all those detailed tuts. I already find myself referring to them more frequently. Now standing in a 4hr Santa line...

Share this post


Link to post
Share on other sites

Hey Eric,

If you don't use it, you lose it, you should know that as it does not only apply to brain power

Merry Christmas to you and your growing family

Share this post


Link to post
Share on other sites

Omg. I am still working on this plugin! I had all the bugs worked out locally then when I went live opera and ie6/7 were badly broke. Ie won't e en load the page and opera shows each image 1/10th the correct size. But only on the first click. Second click is fine. Worked all morning (again!) narrowing down the problems. Opera can't do the CSS display none on the popup image. So margin-left:-999em seems to fix that. That was of course the last thing I thought it was. In ie the problem lies with the Disqus comment plugin. Does not work with this plugin and ie just aborts page load. Getting close to a month on this stupid thing! Arg.

 

My only question. Were in this script is it feeding display none to the zoomed in image? Cause display none in the CSS is only for js off. It's being feed it twice and that may be operas problem. If you think dif please tell. Thanks!

 

Edit: just found it. It's in the script HTML inline CSS. Still... Do you see any reason why opera would puke when using display none to hide the image before the script calls it??? The authors plugin does not suffer from this problem because he only relies on the js driven display none.

Edited by Eric

Share this post


Link to post
Share on other sites

this.each(function(i) {

$($(this).attr('rel')).hide();

$(this).click(show);

});

 

Above 4 lines in bold are hiding the images.

 

I guess you could do a check to see if they're hidden already, if you're sure that's what's causing Opera to choke:

 

this.each(function(i) {

if( $($(this).attr('rel')).css("display") != "none"){ $($(this).attr('rel')).hide(); };

$(this).click(show);

});

Edited by BeeDev

Share this post


Link to post
Share on other sites

Thanks BeeDev. But I just ended up hiding the images with AP and margin-top -999em and that made Opera happy. For some reason margin-left was leaving a large space in a couple browsers. Strange because it shouldn't have. I think it was something to do with the image inside the div. But still shouldn't since it's AP.

Edited by Eric

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...