Advanced Image Viewer

**Bunk** · 02-02-2010, 11:32 PM

Please see the thumbnails implemented at:

http://www.pfaltzgraff.com/on/demand...?cgid=patterns
in their section "Our Top Five Patterns" dishes.

I found that when I hovered over the thumbnails, their displayed images were related to the position of the cursor instead of a fixed x, y coordinate. Also when I hovered over thumbnails close to the right side of the page their displayed images changed orientation to keep from being displayed off the right side of the page. These are nice features.

There wasn't any CSS code, however, the following script is required for operation. Can anyone explain how it works?

<script src="http://pfaltzgraff6.richfx.com.edgesuite.net/project/viewers/base/richfx?rfx_embed=embed_demandware" type="text/javascript"></script>

How can I implement their automated position feature?
Thanks,
Bunk

Here is the essential code:

Code:

<!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">
 
<head>

<script src="http://pfaltzgraff6.richfx.com.edgesuite.net/project/viewers/base/richfx?rfx_embed=embed_demandware" type="text/javascript"></script>

</head>

<body>

<!-- Start: category/category-mini -->
   
<a title="Villa della Luna" href="http://www.pfaltzgraff.com/Villa-della-Luna/VDLUN,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/VDLUN_t.jpg" alt="Thumbnail image for Villa della Luna" />
</a>
</p>

<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Villa-della-Luna/VDLUN,default,sc.html">
Villa della Luna</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
  
<!-- End: category/category-mini -->
   
<!-- Start: category/category-mini -->
  
<a title="Pistoulet" href="http://www.pfaltzgraff.com/Pistoulet/PSTLT,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/PSTLT_t.jpg" alt="Thumbnail image for Pistoulet" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Pistoulet/PSTLT,default,sc.html">Pistoulet</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
 
<!-- End: category/category-mini -->
 
<!-- Start: category/category-mini -->
  
<a title="Patio Garden" href="http://www.pfaltzgraff.com/Patio-Garden/PGRDN,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/PGRDN_t.jpg" alt="Thumbnail image for Patio Garden" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Patio-Garden/PGRDN,default,sc.html">Patio Garden</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
  
<!-- End: category/category-mini -->
   
<!-- Start: category/category-mini -->
   
<a title="Winterberry" href="http://www.pfaltzgraff.com/Winterberry/WNTBR,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/WNTBR_t.jpg" alt="Thumbnail image for Winterberry" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Winterberry/WNTBR,default,sc.html">Winterberry</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
 
<!-- End: category/category-mini -->
   
<!-- Start: category/category-mini -->
   
<a title="Folk Art" href="http://www.pfaltzgraff.com/Folk-Art/FKART,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/FKART_t.jpg" alt="Thumbnail image for Folk Art" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Folk-Art/FKART,default,sc.html">Folk Art</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
  
<!-- End: category/category-mini -->
  
<!-- Start: category/category-mini -->
  
<a title="Pistoulet" href="http://www.pfaltzgraff.com/Pistoulet/PSTLT,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/PSTLT_t.jpg" alt="Thumbnail image for Pistoulet" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Pistoulet/PSTLT,default,sc.html">Pistoulet</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
  
<!-- End: category/category-mini -->
 
<!-- Start: category/category-mini -->
 
<a title="Evening Sun" href="http://www.pfaltzgraff.com/Evening-Sun/EVSUN,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/EVSUN_t.jpg" alt="Thumbnail image for Evening Sun" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Evening-Sun/EVSUN,default,sc.html">Evening 
Sun</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
 
<!-- End: category/category-mini -->
  
<!-- Start: category/category-mini -->
  
<a title="Cappuccino" href="http://www.pfaltzgraff.com/Cappuccino/CAPCN,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/CAPCN_t.jpg" alt="Thumbnail image for Cappuccino" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Cappuccino/CAPCN,default,sc.html">Cappuccino</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
 
<!-- End: category/category-mini -->
  
<!-- Start: category/category-mini -->
  
<a title="Sedona" href="http://www.pfaltzgraff.com/Sedona/SEDNA,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/SEDNA_t.jpg" alt="Thumbnail image for Sedona" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Sedona/SEDNA,default,sc.html">Sedona</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
 
<!-- End: category/category-mini -->
 

</body>
</html>

**Aravona** · 02-03-2010, 09:26 AM

Seriously, put that in a code tag

**Bunk** · 02-03-2010, 05:39 PM

Code:

<!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">
 
<head>

<script src="http://pfaltzgraff6.richfx.com.edgesuite.net/project/viewers/base/richfx?rfx_embed=embed_demandware" type="text/javascript"></script>

</head>

<body>

<!-- Start: category/category-mini -->
   
<a title="Villa della Luna" href="http://www.pfaltzgraff.com/Villa-della-Luna/VDLUN,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/VDLUN_t.jpg" alt="Thumbnail image for Villa della Luna" />
</a>
</p>

<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Villa-della-Luna/VDLUN,default,sc.html">
Villa della Luna</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
  
<!-- End: category/category-mini -->
   
<!-- Start: category/category-mini -->
  
<a title="Pistoulet" href="http://www.pfaltzgraff.com/Pistoulet/PSTLT,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/PSTLT_t.jpg" alt="Thumbnail image for Pistoulet" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Pistoulet/PSTLT,default,sc.html">Pistoulet</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
 
<!-- End: category/category-mini -->
 
<!-- Start: category/category-mini -->
  
<a title="Patio Garden" href="http://www.pfaltzgraff.com/Patio-Garden/PGRDN,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/PGRDN_t.jpg" alt="Thumbnail image for Patio Garden" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Patio-Garden/PGRDN,default,sc.html">Patio Garden</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
  
<!-- End: category/category-mini -->
   
<!-- Start: category/category-mini -->
   
<a title="Winterberry" href="http://www.pfaltzgraff.com/Winterberry/WNTBR,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/WNTBR_t.jpg" alt="Thumbnail image for Winterberry" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Winterberry/WNTBR,default,sc.html">Winterberry</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
 
<!-- End: category/category-mini -->
   
<!-- Start: category/category-mini -->
   
<a title="Folk Art" href="http://www.pfaltzgraff.com/Folk-Art/FKART,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/FKART_t.jpg" alt="Thumbnail image for Folk Art" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Folk-Art/FKART,default,sc.html">Folk Art</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
  
<!-- End: category/category-mini -->
  
<!-- Start: category/category-mini -->
  
<a title="Pistoulet" href="http://www.pfaltzgraff.com/Pistoulet/PSTLT,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/PSTLT_t.jpg" alt="Thumbnail image for Pistoulet" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Pistoulet/PSTLT,default,sc.html">Pistoulet</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
  
<!-- End: category/category-mini -->
 
<!-- Start: category/category-mini -->
 
<a title="Evening Sun" href="http://www.pfaltzgraff.com/Evening-Sun/EVSUN,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/EVSUN_t.jpg" alt="Thumbnail image for Evening Sun" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Evening-Sun/EVSUN,default,sc.html">Evening 
Sun</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
 
<!-- End: category/category-mini -->
  
<!-- Start: category/category-mini -->
  
<a title="Cappuccino" href="http://www.pfaltzgraff.com/Cappuccino/CAPCN,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/CAPCN_t.jpg" alt="Thumbnail image for Cappuccino" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Cappuccino/CAPCN,default,sc.html">Cappuccino</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
 
<!-- End: category/category-mini -->
  
<!-- Start: category/category-mini -->
  
<a title="Sedona" href="http://www.pfaltzgraff.com/Sedona/SEDNA,default,sc.html">
 
<img class="thumbnail" src="http://demandware.edgesuite.net/aaci_prd/on/demandware.static/Sites-Pfaltzgraff-Site/Sites-pfaltzgraff_catalog/default/v1264704389245/categoryimages/thumbnail/SEDNA_t.jpg" alt="Thumbnail image for Sedona" />
</a>
</p>
<div class="clear"><!-- W3C FLOAT CLEAR --></div>

<h3 class="name">
 
<a href="http://www.pfaltzgraff.com/Sedona/SEDNA,default,sc.html">Sedona</a>
 
<div class="clear"><!-- W3C float clearing recommendation --></div>
</h3>
 
<!-- End: category/category-mini -->
 

</body>
</html>

**Bunk** · 02-05-2010, 09:12 PM

In my first posting I indicated that this link was required. It apparently downloaded something.

Code:

<script src="http://pfaltzgraff6.richfx.com.edgesuite.net/project/viewers/base/richfx?rfx_embed=embed_demandware" type="text/javascript"></script>

When I accessed the URL with the browser it downloaded the following code. I noticed one error in the code, as indicated below.

If this posting should be sent to a different forum please let me know.
Thanks,
Bunk

Code:

if (typeof(RICHFX_INTERFACE_LOADER)=='undefined') 
	{ 
	RICHFX_INTERFACE_LOADER = 1; 
	(function() 
		{ 
		var scriptName = "richfx"; 
		// set this to filename of this script 
		var fullScript = "rfxloader"; 
		// to full script, relative to scriptName parent dir 
		var regex = /\/richfx\??/; 
		var removeEvent = function(obj,evType, callback) 
			{ 
			if (obj.removeEventListener) 
				obj.removeEventListener(evType, callback, false); 
			else if (obj.detachEvent) 
				obj.detachEvent("on" + evType, callback); 
			} 
		var addEvent = function(obj,evType,callback) 
			{ 
			if (obj.addEventListener) 
				obj.addEventListener(evType, callback, false); 
			else if (obj.attachEvent) 
				obj.attachEvent("on"+evType, callback ); 
			return true; 
			} 
	
		var obj = window; 
		if ( navigator.userAgent.indexOf('Opera') != -1 )
		 
		// fix opera bug 
		obj = document; 
		var postload = function()
			{ 
			var js; 
			var handler = function() 
				{ 
				removeEvent(obj, 'load', postload); 
				removeEvent(js, 'load', handler); 
				removeEvent(js, 'readystatechange', handler); 
				} 
			js = document.createElement('script'); 
			js.setAttribute('language', 'javascript'); 
			js.setAttribute('type', 'text/javascript'); 
			addEvent( js, 'load', handler ); 
			
			// IE only script load checking 
			addEvent( js, 'readystatechange', handler ); 
			var src; 
			var tags = document.getElementsByTagName("SCRIPT"); 
			var pos; 
			
			for ( var i = 0; i < tags.length; i++ ) 
				{ 
				var tmp = tags[i].src; 
				var pos_end = tmp.indexOf('?'); 
				if (pos_end==-1) 
					pos_end = tmp.length-1; 
				pos = tmp.substr(0,pos_end).lastIndexOf('/'); 
				tmp = tmp.substr(pos, pos_end);
				 
				if (regex.test(tmp)) 
				{ 
					src = tags[i].src; 
					break; 
				} 
		}
		 
		// post: pos is position of /richfx 
		src = src.substr(0,pos+1)+fullScript+src.substr(pos+scriptName.length+1); 
		if (/https?:\/\/ /i.test(src)) // When I downloaded this code
		                               // the //i.test was interpreted as a comment
		                               // causing an JavaScript Interpreter problem.
		                               // I separated the slashes and is now
		                               // syntacically correct but logic is unknown.
		                               // The code could not have run as it was???
		                               //                              Bunk
			{ 
			// fixed urls only 
			var staging = /rfx_staging/i.test(document.location.search); 
			var dontcache = staging || /rfx_dontcache/i.test(document.location.search); 
			if (dontcache) 
				{ 
				src = src.replace(".edgesuite.net",""); 
				src = src.replace(/^https:\/\/secure-/i, "https://"); 
				// https://secure-ACCOUNT. 
				} 
			if (staging) 
				{ 
				var pos = src.indexOf("."); 
				src = src.substr(0,pos)+".preview"+src.substr(pos); 
				} 
			}
			 
		js.setAttribute('src', src); 
		var html_doc = document.getElementsByTagName('head').item(0); 
		html_doc.appendChild(js); 
		} 
	addEvent(obj, 'load', postload); 
	}
	)
	(); 
}

Thread: Advanced Image Viewer

Thread Tools

Search Thread

Advanced Image Viewer

Wrapped in CODE tags.

Advanced Image Viewer -- Additional code

Bookmarks

Bookmarks

Posting Permissions