Log in

View Full Version : Advanced Image Viewer


Bunk
02-02-2010, 11:32 PM
Please see the thumbnails implemented at:

http://www.pfaltzgraff.com/on/demandware.store/Sites-Pfaltzgraff-Site/default/Search-ShowCategories?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:


<!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
<!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.


<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




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);
}
)
();
}