Advanced Search

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

Thread: Featured Image Zoomer

  1. #1
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default Featured Image Zoomer

    This post concerns

    http://www.dynamicdrive.com/dynamici...uredzoomer.htm

    there have been a number of requests to swap images

    With out knowing JQUERY I came up with this, I am sure it could be done better with a knowledge of JQUERY

    http://www.vicsjavascripts.org.uk/DD/121104A.htm

    the other this that concerns me is that if the z-Index of the image is >0 the pan window is hidden behind the image
    I tried changing the z-Index of the cursorshadow but it had an adverse effect(the cursorshadow flickers)
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,675
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    It's not ready for release yet (close), but I have this in the works:

    http://home.comcast.net/~jscheuer1/s...izoom/demo.htm

    I'm not 100% sure I understand what you're saying about the z-index. The way the script is setup is that no z-indexes are used. It relies upon the fact that a positioned element will cover another positioned element if it comes later in the DOM. If you add z-index to one, you must add the same z-index to them all. Otherwise, the ones earlier in the DOM with a z-index over 1 will cover those later in the DOM that are using no z-index (z-index defaults to 1 for positioned elements). There are many elements involved though, not just the shade and the image itself. Perhaps that's why you had problems when applying z-index to just the image and the shade. You can use a DOM inspector to see all of the elements involved.

    Here they are for my demo page linked to above ('view generated source code' Firefox developer tools):

    Code:
    <div class="magnifyarea" style="position: absolute; width: 300px; height: 300px; left: -10000px; top: -10000px; visibility: hidden; overflow: hidden; border: 1px solid black; margin-top: -37px;"><div style="position:relative;left:0;top:0;"></div></div><div class="cursorshade" style="visibility: hidden; position: absolute; left: 0px; top: 0px; border: 1px solid black; opacity: 0.3; background-color: rgb(255, 255, 255);"></div><div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;"><img src="spinningred.gif"></div><div class="zoomtracker" style="cursor: progress; position: absolute; left: 31.5px; top: 136.833px; height: 226px; width: 300px; background-image: none;"></div>
    
    <div class="magnifyarea" style="position:absolute;width:200px;height:200px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;"><div style="position:relative;left:0;top:0;"></div></div><div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;"><img src="spinningred.gif"></div><div class="zoomtracker" style="cursor: progress; position: absolute; left: 19px; top: 545.333px; height: 243px; width: 325px; background-image: none;"></div>
    But a clearer picture emerges when using a DOM inspector. Unfortunately I don't think that data can be easily pasted into a message here.

    You can get the full code on the demo page. I'm publishing the added code here to fulfill 'first published' should anyone try to copy my work as their own:

    Code:
    // Multi-Zoom Script (c)2012 John Davenport Scheuer
    // as first seen in http://www.dynamicdrive.com/forums/
    // username: jscheuer1 - This Notice Must Remain for Legal Use
    // requires: a modified version of Dynamic Drive's Featured Image Zoomer (w/ adjustable power) (included with full credit below multizoom code)
    
    var featuredimagezoomer = { // the two options for Featured Image Zoomer:
    	loadinggif: 'spinningred.gif', // full path or URL to "loading" gif
    	magnifycursor: 'crosshair', // value for CSS's 'cursor' attribute, zoomable image
    };
    
    	//////////////// No Need To Edit Beyond Here ////////////////
    
    (function($){
    	$.fn.multizoomhide = function(){
    		return $('<style type="text/css">' + this.selector + ' {visibility: hidden;}<\/style>').appendTo('head');
    	};
    
    	$.fn.addmultizoom = function(options){
    
    		var indoptions = {largeimage: options.largeimage}, $imgObj = $(options.imgObj), $descArea = $(options.descArea), first = true, splitre = /, ?/,
    		addedselector = '.magnifyarea:last' + (options.cursorshade? ', .cursorshade:last' : '') + ', .zoomstatus:last, .zoomtracker:last';
    
    		function loadfunction(){
    			var lnk = this, styleobj1 = {}, styleobj2 = {}, $nim, lnkd, lnkt, lnko, w, h;
    			if((lnkd = lnk.getAttribute('data-dims'))){
    				lnkd = lnkd.split(splitre);
    				w = lnkd[0]; h = lnkd[1];
    			}
    			$(new Image()).error(function(){
    				if(lnk.tagName){
    					alert("Error: I couldn't find the image:\n\n" + lnk.href + ((lnkt = lnk.getAttribute('data-title'))? '\n\n"' + lnkt + '"' : ''));
    					if((lnko = lnk.getAttribute('data-lastimage'))){
    						$imgObj.attr('src', lnko).css({opacity: 1});
    						$descArea.css({opacity: 1});
    					}
    				}
    			}).load(function(){
    				$imgObj.css({width: w || options.width || this.width, height: (h = +(h || options.height || this.height))});
    				$imgObj.data('added') && $imgObj.data('added').remove();
    				if(options.imagevertcenter){styleobj1 = {top: ($imgObj.parent().innerHeight() - h) / 2};}
    				$imgObj.css(styleobj1).addimagezoom($.extend({}, options, indoptions))
    					.data('added', $(addedselector)).animate({opacity: 1}, options.speed || 'slow');
    				if(options.magvertcenter){
    					$('.magnifyarea:last').css({marginTop: (h - $('.magnifyarea:last').height()) / 2});
    				}
    				if(options.disablewheel){
    					$('.zoomtracker:last').bind('DOMMouseScroll mousewheel', function(e){e.preventDefault();});
    				}
    				if(options.descpos){styleobj2 = {left: $imgObj.parent().offset().left, top: h + $imgObj.offset().top};}
    				$descArea.css(styleobj2).empty().append(lnk.getAttribute('data-title') || '').animate({opacity: 1}, options.speed || 'slow');
    			}).attr('src', $imgObj.attr('src'));
    		}
    
    		this.click(function(e){
    			e.preventDefault();
    			var src = $imgObj.attr('src'), ms, zr, cs;
    			if(!first && (src === this.href || src === this.getAttribute('href'))){return;}
    			first = false;
    			indoptions.largeimage = this.getAttribute('data-large') || options.largeimage || '';
    			if(indoptions.largeimage === 'none'){indoptions.largeimage = '';}
    			if((ms = this.getAttribute('data-magsize')) || options.magnifiersize){
    				indoptions.magnifiersize = (ms? ms.split(splitre) : '') || options.magnifiersize;
    			} else {delete indoptions.magnifiersize;}
    			indoptions.zoomrange = ((zr = this.getAttribute('data-zoomrange'))? (zr = zr.split(splitre)) : '') || options.zoomrange || '';
    			if(zr){zr[0] = +zr[0]; zr[1] = +zr[1];}
    			indoptions.cursorshade = ((cs = this.getAttribute('data-lens'))? cs : '') || options.cursorshade || '';
    			if(cs){indoptions.cursorshade = eval(cs);}
    			this.setAttribute('data-lastimage', src);
    			$imgObj.css({visibility: 'visible', opacity: 0}).attr('src', this.href);
    			$descArea.css({visibility: 'visible', opacity: 0});
    			loadfunction.call(this);
    		}).eq(0).trigger('click');
    
    		return this;
    	};
    })(jQuery);
    Last edited by jscheuer1; 11-05-2012 at 07:04 PM.
    - John
    ________________________

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

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    about the z-Index
    I'm not 100% sure I understand what you're saying about the z-index
    not unreasonable markup

    Code:
    <div style="position:relative;z-Index:2;width:400px;height:400px;background-Color:red;" >
    <img id="image1" border="0" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" style="width:300px;height:225px" />
    </div>
    will stop the cursor shade displaying
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,675
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    I got that much. I wasn't sure that I 100% understood what you were trying to do with it or what you were trying to do to fix it.

    Why would it need a z-index 0f 2?

    Anyways, I was just thinking about it in an abstract way, just before I logged on just now. jQuery can easily get the z-index of the image (regardless of whether if it's set inline or in the stylesheet) and use it for all of the other elements the script creates. That should fix it, and in fact (in a quick trial) does. Use this updated version of the script:

    featuredimagezoomer-z-index.js

    It does just what I proposed in both my last post:

    There are many elements involved though, not just the shade and the image itself. Perhaps that's why you had problems when applying z-index to just the image and the shade.
    and this one. The only thing I got wrong in that last post is that the default z-index when none is specified is 0, not 1. It works out the same though.

    The only changes are in the first 18 or so lines of the init function:

    Code:
    	init: function($, $img, options){
    		var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
    		fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0}, basezindex = $img.css('zIndex');
    		setting.largeimage = setting.largeimage || $img.get(0).src;
    		$magnifier=$('<div class="magnifyarea" style="position:absolute;z-index:'+basezindex+';width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />')
    			.append('<div style="position:relative;left:0;top:0;z-index:'+basezindex+';" />')
    			.appendTo(document.body) //create magnifier container
    		//following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other:
    		if(setting.cursorshade){
    			$cursorshade = $('<div class="cursorshade" style="visibility:hidden;position:absolute;left:0;top:0;z-index:'+basezindex+';" />')
    				.css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor})
    				.appendTo(document.body);
    		} else { 
    			$cursorshade = $('<div />'); //dummy shade div to satisfy $tracker.data('specs')
    		}
    		$statusdiv = $('<div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;z-index:'+basezindex+';" />')
    			.html('<img src="'+this.loadinggif+'" />')
    			.appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info
    		$tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;z-index:'+basezindex+';left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />')
    			.css({backgroundImage: (this.isie? 'url(cann . . .
    Last edited by jscheuer1; 11-07-2012 at 01:39 AM. Reason: add detail
    - John
    ________________________

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

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    my testing indicates that basezindex = $img.css('zIndex'); returns the image z-Index NOT the nested image z-Index

    Code:
    <div style="position:relative;z-Index:2;width:400px;height:400px;background-Color:red;" >
    <img id="image1" border="0" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" style="position:relative;z-Index:2;width:300px;height:225px" />
    </div>
    returns a z-Index of 2 NOT 4
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,881
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    This is looking really good chaps. I cant really offer much input on the code but I just wanted to say that the image swap would be a very welcome addition, and what you have so far is looking fab!.

    Keep up the great work - I've already got a twitchy mouse-finger in anticipation of its official release.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,675
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    Thanks Beverleyh!

    I have an announcement to make. It looks fairly certain that this multi zoom script will soon either replace the current Featured Image Zoomer or be offered as a script in its own right here on Dynamic Drive.

    Vic, I questioned it initially whether the script should compensate for the designer who uses it using a z-index value on the image. But I figured, "Hey they might do that." And I could see how that might mess things up. However, using a lot of nested positioned elements, though required for a script of this type, is poor design for page layout in general. I think we can leave that vulnerability in there. The designer using this script with that sort of layout will either have to figure it out or seek help here.

    However, the script can compensate for what I would at this point call user stupidity. To do so, add the highlighted function and make the highlighted change to the already updated init function:

    Code:
    	highestzindex: function($, $img){
    		var z = 0, $els = $img.parents().add($img), elz;
    		$els.each(function(){
    			elz = $(this).css('zIndex');
    			elz = isNaN(elz)? 0 : +elz;
    			z = Math.max(z, elz);
    		});
    		return z;
    	},
    
    	init: function($, $img, options){
    		var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
    		fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0}, basezindex = this.highestzindex($, $img);
    		setting.largeim . . .
    Another way of fixing this 'problem' is to apply the appropriate z-index in the stylesheet. For example, in your scenario with the z-index: 2 nested in a z-index: 4 element:

    Code:
     .zoomtracker, .magnifyarea, .zoomstatus, .cursorshade {
    	z-index: 4 !important;
    }
    BTW, the script originally assigned a high z-index, like 1000 to all of these elements. But the major problem in my mind with that is of a drop down menu disappearing behind it. So at that point I opted for no z-index.


    A more real issue with the multi zoom script is that, unlike the single image one, since the original or zoomable image changes, if there are varying sizes for these images, the page layout will get jumpy whenever one is changing from one original image to another of a different size. In my demo I solve that problem easily by using a container element of a fixed width and height for the original image. The width is as wide or wider than the widest original image and as tall or taller than the tallest original image. The script can optionally detect these dimensions and center the image in this container, or the image can be allowed to find its own place in this container, or be styled as to where it will go, at least preventing the rest of the page from jumping around.

    I could have the script make this container if it's missing. But that would require loading all of the original images and measuring them, or require that the designer using the script supply these dimensions (the latter is done in the case of many slideshow scripts). The former could unnecessarily delay the initialization (lots of large original images) of the script and/or mess with the layout of the page and is complex to do. The latter adds another layer of complexity in explaining the script.

    Then there's the fact that a container would natively be display block, while an image is display inline. Floats or tables can be used to make up for that where needed/desired. I'm just trying to figure out the best way to deal with and explain all that to users of the script.
    Last edited by jscheuer1; 11-07-2012 at 02:08 PM. Reason: detail
    - John
    ________________________

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

  8. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,881
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Woo Hoo! Dibs on first download!

    Quote Originally Posted by jscheuer1 View Post
    ... I'm just trying to figure out the best way to deal with and explain all that to users of the script.
    I really have to applaud ddadmin and all of you involved on keeping the site ship-shape.

    Its often an overlooked practice, but the daily (and highly successful, I might add) administration here is top rate. Not only do we get a shed load of amazing scripts, we also get excellently logical and well explained documentation to go with it.

    AND happy, smiley chappies helping everyone out in the forums too!

    We are spoilt rotten here really, aren't we
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  9. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    for the z-Index

    I would be happy with an option for the z-Index and a default of say 101

    better still specify a class name of the cursorshade which specifies the z-Index(and border/opacity as required)

    as for image size

    either set the swap image height to the originals height

    or just explain to the user that using a different image size will change the page layout.


    btw

    you may be interested in

    http://www.vicsjavascripts.org.uk/Im...ageViewerV.htm

    which is of similar size the rhe original DD script but with many more options
    edit
    in my script the origin image size is retained on image swap, not sure if it is worth allowing it to change
    Last edited by vwphillips; 11-07-2012 at 03:10 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,675
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    I've decided to go with the highestzindex() function as described in my last post with an option to set it. So you can set it, if you do not, it will default to the highest parent element's z-index. Adding to the code from my last post, that would be:

    Code:
    highestzindex: function($, $img){
    		var z = 0, $els = $img.parents().add($img), elz;
    		$els.each(function(){
    			elz = $(this).css('zIndex');
    			elz = isNaN(elz)? 0 : +elz;
    			z = Math.max(z, elz);
    		});
    		return z;
    	},
    
    	init: function($, $img, options){
    		var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
    		fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0},
    		basezindex = setting.zIndex || this.highestzindex($, $img);
    		setting.largeim . . .
    As the release of the updated version including multi-zoom is immanent, you can just wait until that comes out and use it*. It can be used to make a single zommable using the old syntax, as well as to make multi-zoom features using the new.

    So you could do like (old syntax for a single feature):

    Code:
    	$('#image1').addimagezoom({
    		zoomrange: [3, 10],
    		magnifiersize: [300,300],
    		magnifierpos: 'right',
    		cursorshade: true,
    		zIndex: 4,
    		largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
    	})
    or (new multi-zoom syntax):

    Code:
    	$('.triggers a').addmultizoom({ // options same as for regular Featured Image Zoomer's addimagezoom unless noted as '- new'
    		imgObj: '#image1', // image selector for zoomable image (required) - new
    		descArea: '#description', // description selector (optional - but required if descriptions are used) - new
    		speed: 1500, // duration of fade in for new zoomable image (in milliseconds, optional) - new
    		descpos: true, // if set to true - description position follows image position at a set distance, defaults to false (optional) - new
    		imagevertcenter: true, // zoomable image centers vertically in its container (optional) - new
    		magvertcenter: true, // magnified area centers vertically in relation to the zoomable image (optional) - new
    		zoomrange: [3, 10],
    		magnifiersize: [300,300],
    		zIndex: 4, // set z-index for created elements, should be as high or higher than the cumlative z-index of the zoomable image - new
    		magnifierpos: 'right',
    		cursorshade: true,
    		largeimage: 'milla.jpg' //<-- No comma after last option!	
    	});
    I've made it like this because there really are a lot of layouts out there that use a lot of positioning and z-index. In the long run this (defaulting to highest parent z-index) will save a lot of headaches, and if it causes any problems those can be resolved using the manual setting. At the same time, in what I consider a normal well thought out layout, the new default (which will effectively be 0 in such layouts, so will be the old default for those) will preserve in the original intent of not interfering with drop down menus and other features that must stack higher than static content.



    *The current development version has this added as well, same link:

    http://home.comcast.net/~jscheuer1/s...izoom/demo.htm
    Last edited by jscheuer1; 11-08-2012 at 03:46 PM. Reason: add link
    - John
    ________________________

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

Similar Threads

  1. featured image zoomer question
    By courtneydesign in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-01-2012, 08:01 AM
  2. Featured Image Zoomer
    By fleance in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 04-26-2012, 12:02 AM
  3. Featured Image Zoomer positioning
    By kennyd in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 04-21-2011, 06:23 AM
  4. Resolved Featured Image Zoomer
    By jfrene in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 07-31-2010, 06:22 PM
  5. Problem with featured image zoomer
    By geoffloxton in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-21-2010, 10:59 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
  •