Image rotation with spry

<cfsetting enableCFoutputOnly="yes"
showDebugOutput="no">
<cfinclude
template="../includes/XMLExport/XMLExport.cfm">
<cfquery name="get_ads" datasource="#dns#">
SELECT *
FROM BannerAds
WHERE type = 'c' AND
realastate = 3 AND
active = 1
</cfquery>
<cfscript>
// Begin XMLExport get_ads
xmlExportObj = XMLExport_CreateObject("XMLExport");
xmlExportObj.init();
xmlExportObj.setRecordset(get_ads);
xmlExportObj.addColumn("ID", "ID");
xmlExportObj.addColumn("type", "type");
xmlExportObj.addColumn("fileName", "fileName");
xmlExportObj.addColumn("link", "link");
xmlExportObj.addColumn("date", "date");
xmlExportObj.addColumn("realastate", "realastate");
xmlExportObj.addColumn("rotation", "rotation");
xmlExportObj.addColumn("active", "active");
xmlExportObj.setMaxRecords("ALL");
xmlExportObj.setXMLEncoding("ISO-8859-1");
xmlExportObj.setXMLFormat("NODES");
xmlExportObj.setRootNode("id");
xmlExportObj.Execute();
// End XMLExport get_ads
</cfscript>
<cfsetting enableCFoutputOnly="no">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Which I get my results of.....
−
<id>
−
<row>
<ID>78</ID>
<type>c</type>
<fileName>CDCLarue-Column.gif</fileName>
<link>
http://www.cdclarue.com/cd.php</link>
<date>2007-25-04 08:53:00</date>
<realastate>3</realastate>
<rotation/>
<active>1</active>
</row>
−
<row>
<ID>80</ID>
<type>c</type>
<fileName>Werk-column.jpg</fileName>
<link>
http://www.werkmaster.com/</link>
<date>2007-01-05 13:30:00</date>
<realastate>3</realastate>
<rotation/>
<active>1</active>
</row>
−
<row>
<ID>85</ID>
<type>c</type>
<fileName>Versatile-column.gif</fileName>
<link>
http://www.garagecoatings.com/</link>
<date>2007-15-05 14:00:00</date>
<realastate>3</realastate>
<rotation/>
<active>1</active>
</row>
</id>
Ok.....I'm obviously new to Spry-Ajax :) but have learned a
lot already I just need to understand how to work with the data in
the <body> area... I basically need to pull each image or set
of data individually and rotate each data set/image on the page at
10 second intervals.
Thank you,
Brian

Similar Messages

How to i add an image path with spry data set

hi
how to i add an image path with spry data set. I made a xml file and then created a data set in html but image won't load
this is my XML
<?xml version="1.0" encoding="UTF-8"?>
<banner width = "185" height = "400">
    <item>
        <image scr = "nui-panforte-recipe_01.jpg" ></image>
        <description>CHOC-COCONUT PANFORTE</description>
        <text1>Try this delicious GLUTEN FREE Christmas treat</text1>
        <text2>CHOC-COCONUT PANFORTE</text2>
    </item>
</banner>
this is my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body>
<div spry:region="ds1">
<table>
    <tr spry:repeat="ds1">
      <td>{image}</td>
      <td>{description}</td>
      <td>{text1}</td>
      <td>{text2}</td>
      <td>{text3}</td>
      <td>{text4}</td>
      <td>{link}</td>
      <td>{url}</td>
      <td>{target}</td>
    </tr>
</table>
</div>
</body>
</html>

It would be helpfull if you actually created an <img> tag to start with
<img src="{image/@src}" />
would work.

Image rotation with fade effect

I am new to the spry framework and have just started going
through the examples to see if I could create an image rotator that
fades the images into each other when changing. I have taken
snippets from different places to do this and think I have the
answer but really wanted some feedback to sanity check and let me
know if this is the best way of doing it. If it is, then I hope
others will find it useful.
Here is the url to the example:
Image
rotation example
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 8000; // 8 seconds
var imageFadeInterval = 4000; // 4 seconds
var image2Loaded = null;
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha$opacity([0-9]{1,3})$/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
if(image2Loaded == null) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
image2Loaded = 0;
} else {
if(image2Loaded) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 0;
} else {
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 1;
effect.start();
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg.addObserver(obs2);
</script>
</body>
</html>

I think that I might have got this going now. Here is the
code if anyone wants to use it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 4000; // 8 seconds
var imageFadeInterval = 2000; // 4 seconds
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha$opacity([0-9]{1,3})$/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
//use this flag to avoid the effect running on load
if (typeof image2Loaded == 'undefined') {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
if(image2Loaded) {
var img = document.getElementById('display');
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
var img = document.getElementById('animate');
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg2.getCurrentRow();
image2Loaded = 1;
var imgPath = '<?php echo $rootDir.$baseDir;?>/' +
curRow["@path"];
var gImageLoader = new Image();
gImageLoader.onload = function()
effect.start();
gImageLoader.src = imgPath;
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg2.addObserver(obs2);
</script>
</body>
</html>

Image Rotation with AE SDK

Hello all,
I am wondering if someone could suggest a desription of image rotation using Adobe AE SDK - in a Forum entry or in some other related document. While some elements of rotation may be considered available in SDK sample projects - Shifter for all pixels, CCU for individual pixels manipulation - I will appreciate more details for variable subpixel processing and neighbouring pixel interpolation for variable row-by-row shift. It is assumed the angle of rotation is fixed during the effect, and there are no worries about the appearance of out-of-border picture elements since there is a background. Speed will not be an issue as well.
Thank you in advance.

well, the easiest way for rotating an image through the sdk is by using transform_word().
it takes a matrix (or matrices for motion blur), so you can do any transform operation concievable via a matrix.
here's a thread with some detail about this function:
http://forums.adobe.com/message/1970939#1970939
as for line by line transformations...
there are some toos in the SDK, but they're available only for AEPGs of type "artizan" (the plug-ins that render whole comps),
so if you're planning a layer effect, these tools are out of the question.
you can do that calculation manually in a few ways.
you can create a tranformation matrix and run each pixel through it, which would probably be the fastest most versitile way.
or you can use trigonometry, which would probably be the easiest to implement but the slowest to process.
using the sdk's subpixel sample functions would complete the tools you need, but keep in mind that this would be the slowest possible way of rotating an image.

A 'normal' thumbnail-image structure with Spry

Hello.
I would like to ask the devolopers of Spry if it is possible
to implement, with Spry classes, a basic structure for the opening
of an image from a thumbnail. I examined your examples about the
photo gallery but I would like to perform a more simple behaviour.
Having a Spry-enhanced table like this:
<tbody spry:repeatchildren="dsRisultatiRicerca"
spry:choose="choose" >
<tr spry:default="default"
spry:setrow="dsRisultatiRicerca" spry:hover="rowHover"
spry:select="rowSelected">
<td align="center" width="119" height="119">
<a href="#open"
onclick="openImage('{MYIMAGE}');"><img src="{MYTHUMBNAIL}"
border="0"></a>
</td>
<td>{CODE}</td>
</tr>
[etc...]
I would like that at the click upon MYTHUMBNAIL a 'modal' div
appeared with the same characteristics (in terms of borders, shape
transition and fade) of the example of your Photo Gallery.
The 'opened' image should be visualized in the center of the
screen and it should be possible to close the div with a button 'X'
or similar.
I would thank you if you could provide some support on this
matter.
Newcomsas

Hi Gowda,
According to your description, I understand that the meeting request contain picture will be auto increased when send to recipients.
If I misunderstand your concern, please do not hesitate to let me know.
How about the internal or external mail flow with Outlook client?
It’s by default for external mail flow with outlook. Messages increase in size while in transit through the Internet beyond the actual sum of the size of text, graphics, pictures, and attachments.
Encoding of a message for transmission through the Internet leads to a size increase of approximately one-third.
I find an similar thread about this question, for you reference:
https://social.technet.microsoft.com/Forums/office/en-US/25eebccb-4cf6-43af-b16c-336e1c60a735/inserting-picture-in-meeting-request-size-increasing?forum=outlook
Best Regards,
Allen Wang

How to use Image Rotator with Firefox??

Since the latest update of Firefox , my image Rotator will not show my images in my forum. They work fine if I use IE but I much prefer to use Firefox as my browser.
IPlease help, I don't want to use IE.
Thanks in advance.

Make use of Firefox Addons
*https://addons.mozilla.org/en-us/firefox/addon/rotate-image/

Image rollovers with Spry fade possible?

Does anyone know of a way to implement the Spry Fade effect
so that the result is an image that will fade onmouseover and fade
out onmouseout?
Ideally I would use .hover, but this is not available, so I
have to use onmouseover and onmouseout.
The problem with this is that if you roll out of the image
before the fade is complete, when you roll in again, the image
starts the fade again and does not fade from where it had gotten
to.
I could use setInterval and clearInterval, but I was hoping
that Spry would have a good, fast work around.
Basically I want a button image that fades seamlessly when
you rollover it.
Many thanks.

quote:
Originally posted by:
wriggs
Does anyone know of a way to implement the Spry Fade effect
so that the result is an image that will fade onmouseover and fade
out onmouseout?
Ideally I would use .hover, but this is not available, so I
have to use onmouseover and onmouseout.
The problem with this is that if you roll out of the image
before the fade is complete, when you roll in again, the image
starts the fade again and does not fade from where it had gotten
to.
I could use setInterval and clearInterval, but I was hoping
that Spry would have a good, fast work around.
Basically I want a button image that fades seamlessly when
you rollover it.
Many thanks.
Hi, I have no relevant eixperience with the Spry ajax
framework, but it can be solved with
mootools framework easily.
<img src="yourbutton" id="button" onmouseover="fadein();"
onmouseout="fadeout();"/>
<script>
function fadein() {
new Fx.Style( "button", 'opacity', {duration: 1000 }
).start(0.5,1);}
function fadeout() {
new Fx.Style( "button", 'opacity', {duration: 1000 }
).start(1,0.5);}
</script>
Of course you will need to set the 0.5 opacity property via
css.
Regards
Bagi Zoltán

Pivot point in image rotation with JAI...

I'm using JAI to rotate some images...
but it doesnt seem to rotate around the center of the image..
here is my codes..
float xOrigin = ((float)src.getWidth())/2;
float yOrigin = ((float)src.getHeight())/2;
float angle = (float)v * (float)(Math.PI/180.0F);
Interpolation interp = Interpolation.getInstance(Interpolation.INTERP_BICUBIC);
ParameterBlock params = new ParameterBlock();
params.addSource(src);
params.add(xOrigin);
params.add(yOrigin);
params.add(angle); // rotation angle
params.add(interp); // interpolation method
des = JAI.create("rotate", params);
displayImage(des);
note: src and des is defined as PlanarImage.
any clues why the center point isn't height/2 and width/2??
thx

It seems that on problem with the code, I use same code when I rotate the image. How do you display the image? maybe problem is there, after the ratation, the origin of the image changes, if your display method can not handle this, you may not display it properly.

Correct image rotation with CameraRoll

At the moment I'm implementing CameraRoll in my app.
It's a great class, but the images do not rotate correctly on Android. Other apps seem to be able to determine if the picture was taken in landscape or portrait mode, and view the image in the correct orientation.
As for now the users in my app will have to rotate their image manually...
Does anyone know a fix/workaround for this?

well, the easiest way for rotating an image through the sdk is by using transform_word().
it takes a matrix (or matrices for motion blur), so you can do any transform operation concievable via a matrix.
here's a thread with some detail about this function:
http://forums.adobe.com/message/1970939#1970939
as for line by line transformations...
there are some toos in the SDK, but they're available only for AEPGs of type "artizan" (the plug-ins that render whole comps),
so if you're planning a layer effect, these tools are out of the question.
you can do that calculation manually in a few ways.
you can create a tranformation matrix and run each pixel through it, which would probably be the fastest most versitile way.
or you can use trigonometry, which would probably be the easiest to implement but the slowest to process.
using the sdk's subpixel sample functions would complete the tools you need, but keep in mind that this would be the slowest possible way of rotating an image.

Image rollover with spry menu

Hi everyone:
I have a vertical spry menu as shown below. I was trying to
display an image-text(graphic image) when i mouse over for example
on "home" or "product" or on any of them. it will be different
image for each of them. I tried using the images as background
images on hover but raan into two problems. 1) image shown was the
same for all of them and 2)the already existing text is over the
top of the image.
any idea please.
thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">home</a> </li>
<li><a href="history.html"
class="MenuBarItemSubmenu">product</a>
<ul>
<li><a
href="history.html">history</a></li>
<li><a
href="performance.html">performance</a></li>
<li><a
href="results.html">results</a></li>
<li><a href="welding_tips.html">welding
tips</a></li>
</ul>
</li>
<li><a href="customers.html">customers</a>
</li>
<li><a
href="partner.html">partner</a></li>
<li class="MenuBarItemSubmenuHover"><a
href="news.html"
class="MenuBarItemSubmenuHover">news</a></li>
<li><a href="about_us.html">about
us</a></li>
<li><a href="contact_us.html">contact
us</a></li>
</ul>
<script type="text/javascript">

</script>
</body>
</html>

The easiest way is to use pseudo elements.
To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical li:first-child a {
    background-color: red;
    color: white;
ul.MenuBarVertical li:last-child a {
    background-color: green;
    color: yellow;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
In your case, in liue of the background colour, you would have an image.
Gramps

Loss of sharpness upon image rotation: Aperture vs. other software

I have carefully studied the resulting loss of sharpness upon rotation/straightening of images. This topic does not apply to 90/180 degree rotations.
When any image is rotated (be it JPEG or uncompressed), there will be a slight loss of quality (seen as a loss of sharpness) due to interpolation. The method of interpolation applied will affect the degree of quality degradation.
Simply put, professional applications such as Adobe Photoshop and even Adobe Lightroom use superior interpolation methods when performing rotations (and who knows, perhaps for other transformations/scalings also?!). Apple Aperture, on the other hand, uses an interpolation method that renders a loss of image sharpness on par with inferior consumer-level software such as Google Picasa or iView Media Pro. Yes, folks, here's a clear reason to select Adobe Lightroom over Apple Aperture.
Please take a close look at the comparison yourself:
http://web.mac.com/rishisanyal/iWeb/Homepage/Sharpness.jpg
Make sure you are viewing the image I have posted at 100%, not scaled, in order to clearly see the inferior quality of images rotated with Aperture & Picasa.
Apple needs to address this problem by implementing a better interpolation algorithm with its straighten tool. It is sad that we are using and paying for a 'Professional' application that yields results on par with FREE software such as Google Picasa.
As much as I like Aperture for its other features/integration into Mac OS X, I am switching to Lightroom as of now. Straightening/rotating images is an absolute must, used by every photographer on a daily basis. The loss of image quality, therefore, is unacceptable.
Please post to this thread if you have experienced the same problem or are simply concerned over this. The more people that show concern, hopefully, the more likely Apple is willing to do something about this ASAP.

Surely any rotation (apart from the 90/180/270 ones) is by-definition a smoothing operation ? You have to take the values from adjacent pixels and combine them based on the rotation, then average (or use a point-spread function) them to rescale the values back into range.
Looks to me as though the Adobe products are just applying a sharpen operation immediately after the rotation, whereas Aperture isn't. Or Aperture could be using a simple average of the values, where Adobe is doing a gaussian summation-of-components or something similar.
My guess would be that they "do a quick sharpen", otherwise it would take longer to do the rotate. The only way you'll ever know is if the developers tell you though...
-=C=-

Having a hard time with Spry Image & CS5 on GoDaddy

Please excuse the newbie here. I hope I can give you all the info up front.
I downloaded and installed the Spry Image Slideshow with Filmstrip widget just fine into DreamWeaver CS5. I then changed Donald Booth's page to show images from my hobby of 12 images, deleting what I didn't need after that. I created thumbnails, directed everything to where it needs to go (so I thought) and saved it all. I then used FileZilla to upload to my GoDaddy site at www.cargobay13.com the file cafnew2.html and the Spry folder. The actual page is at www.cargobay13.com/cafnew2.html . So, the image file works great on my PC (a windows xp pro unit), but when I try to look at it on the internet (in google Chromer, IE8 and Firefox), it gives me a bunch of messages like "SpryPanelSelector.js requires SpryWidget.js!", etc. Then, the webpage displays all 12 images in a column, one on top of the other. I have uploaded the Spry-UI-1.7 folder into the root directory, and for good measure I copied all the individual files into the directory, too. So, what do I do now?
Here is the code for the page. After reading about hard lining the java to the wrong folder, I added the "http://www.cargobay13.com/" to the script src lines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Brisco County, Jr.</title>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStr ipPlugin.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugi n.js" type="text/javascript"></script>
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin .js" type="text/javascript"></script>
<link href="http://www.cargobay13.com/Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #ImageSlideShow */
#ImageSlideShow {
width: 684px;
margin: 24px 0px 0px 0px;
border: solid 1px #000000;
background-color: #717c96;
padding-top: 10px;
#ImageSlideShow .ISSName {
top: -24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 18px;
text-transform: none;
color: #000000;
#ImageSlideShow .ISSSlideTitle {
top: -18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
overflow: hidden;
color: #000000;
text-transform: none;
#ImageSlideShow .ISSClip {
height: 432px;
margin: 0 10px 10px 10px;
border: solid 1px #ffffff;
background-color: #000000;
#ImageSlideShow .ISSControls {
top: 11px;
height: 432px;
#ImageSlideShow .FilmStrip {
height: 80px;
background-color: #2a3a5b;
#ImageSlideShow .FilmStripPreviousButton, #ImageSlideShow .FilmStripNextButton {
width: 25px;
height: 80px;
#ImageSlideShow .FilmStripTrack {
height: 80px;
#ImageSlideShow .FilmStripContainer {
height: 80px;
#ImageSlideShow .FilmStripPanel {
height: 80px;
padding-left: 10px;
margin-right: 0px;
#ImageSlideShow .FilmStripPanel .ISSSlideLink {
margin-top: 10px;
border: solid 1px #2a3a5b;
background-color: #2a3a5b;
#ImageSlideShow .FilmStripPanel .ISSSlideLinkRight {
border: solid 1px #404f6b;
width: 56px;
height: 47px;
margin: 4px 4px 4px 4px;
#ImageSlideShow .FilmStripCurrentPanel .ISSSlideLink {
background-color: #59647d;
border-color: #59647d;
#ImageSlideShow .FilmStripCurrentPanel .ISSSlideLinkRight {
border-color: #404f6b;
/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">

</script>
</head>
<body>
<ul id="ImageSlideShow" title="Brisco County, Jr.">
<li><a href="http://www.cargobay13.com/images/caf001-001.jpg" title="Reference"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-001.jpg" alt="Reference" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-002.jpg" title="Reference"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-002.jpg" alt="Reference" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-002.jpg" title="In progress"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-003.jpg" alt="In progress" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-004.jpg" title="In progress"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-004.jpg" alt="In progress" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-005.jpg" title="Completed figure"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-005.jpg" alt="Completed figure" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-006.jpg" title="Completed figure"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-006.jpg" alt="Completed figure" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-007.jpg" title="Figure on card"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-007.jpg" alt="Figure on card" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-008.jpg" title="Front and back"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-008.jpg" alt="Front and back" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-009.jpg" title="Miscellaneous"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-009.jpg" alt="Miscellaneous" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-010.jpg" title="Miscellaneous"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-010.jpg" alt="Miscellaneous" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-011.jpg" title="Autograph"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-011.jpg" alt="Autograph" /></a></li>
<li><a href="http://www.cargobay13.com/images/caf001-012.jpg" title="Actor with figure"><img src="http://www.cargobay13.com/images/caf-tn/tn-caf001-012.jpg" alt="Actor with figure" /></a></li>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141543: #ImageSlideShow
var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
widgetID: "ImageSlideShow",
widgetClass: "BasicSlideShowFS",
injectionType: "replace",
autoPlay: true,
displayInterval: 8000,
transitionDuration: 2000,
componentOrder: ["name", "title", "view", "controls", "links"],
sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin, Spry.Widget.ImageSlideShow.TitleSliderPlugin, Spry.Widget.ImageSlideShow.PanAndZoomPlugin ],
TFSP: { pageIncrement: 8, wraparound: true }
// EndOAWidget_Instance_2141543
</script>
</body>
</html>

Hey Gramps,
I had one question. When you changed the:
<script src="http://www.cargobay13.com/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
TO
<script src="http://www.pleysier.com.au/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
I see that you swapped the cargobay13.com --to--> pleysier.com.au ... Does it need to be changed to pleysier.com.au specifically? or is it a diffirent directory in the server?
Im having the Same issue, In Dreamweaver CS5 and in Previw Mode is fine, untill i upload the to my server I receive the [SpryXXXXXX requires SpryXXXXXXX].
Please Help, Thank You.

Rotate Image Created with createImage() ?

I've been looking around online for a way to do this, but so far the only things I have found are 50+ lines of code. Surely there is a simple way to rotate an image created with the createImage() function?
Here's some example code with all the tedious stuff already written. Can someone show me a simple way to rotate my image?
import java.net.*;
import java.awt.*;
import java.awt.geom.*;
import java.awt.event.*;
import javax.swing.*;
public class RotImg extends JApplet implements MouseListener {
          URL base;
          MediaTracker mt;
          Image myimg;
     public void init() {
          try{ mt = new MediaTracker(this);
               base = getCodeBase(); }
          catch(Exception ex){}
          myimg = getImage(base, "myimg.gif");
          mt.addImage(myimg, 1);
          try{ mt.waitForAll(); }
          catch(Exception ex){}
          this.addMouseListener(this);
     public void paint(Graphics g){
          super.paint(g);
          Graphics2D g2 = (Graphics2D) g;
          g2.drawImage(myimg, 20, 20, this);
     public void mouseClicked(MouseEvent e){
          //***** SOME CODE HERE *****//
          // Rotate myimg by 5 degrees
          //******** END CODE ********//
          repaint();
     public void mouseEntered(MouseEvent e){}
     public void mouseExited(MouseEvent e){}
     public void mousePressed(MouseEvent e){}
     public void mouseReleased(MouseEvent e){}
}Thanks very much for your help!
null

// <applet code="RotationApplet" width="400" height="400"></applet>
// use: >appletviewer RotationApplet.java
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import javax.swing.*;
public class RotationApplet extends JApplet {
    RotationAppletPanel rotationPanel;
    public void init() {
        Image image = loadImage();
        rotationPanel = new RotationAppletPanel(image);
        setLayout(new BorderLayout());
        getContentPane().add(rotationPanel);
    private Image loadImage() {
        String path = "images/cougar.jpg";
        Image image = getImage(getCodeBase(), path);
        MediaTracker mt = new MediaTracker(this);
        mt.addImage(image, 0);
        try {
            mt.waitForID(0);
        } catch(InterruptedException e) {
            System.out.println("loading interrupted");
        return image;
class RotationAppletPanel extends JPanel {
    BufferedImage image;
    double theta = 0;
    final double thetaInc = Math.toRadians(5.0);
    public RotationAppletPanel(Image img) {
        image = convert(img);
        addMouseListener(ml);
    public void rotate() {
        theta += thetaInc;
        repaint();
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
                            RenderingHints.VALUE_INTERPOLATION_BICUBIC);
        double x = (getWidth() - image.getWidth())/2;
        double y = (getHeight() - image.getHeight())/2;
        AffineTransform at = AffineTransform.getTranslateInstance(x,y);
        at.rotate(theta, image.getWidth()/2, image.getHeight()/2);
        g2.drawRenderedImage(image, at);
    private BufferedImage convert(Image src) {
        int w = src.getWidth(this);
        int h = src.getHeight(this);
        int type = BufferedImage.TYPE_INT_RGB; // options
        BufferedImage dest = new BufferedImage(w,h,type);
        Graphics2D g2 = dest.createGraphics();
        g2.drawImage(src,0,0,this);
        g2.dispose();
        return dest;
    private MouseListener ml = new MouseAdapter() {
        public void mousePressed(MouseEvent e) {
            rotate();
}

Rotating image loaded with CameraRoll

I'm having trouble working out how to rotate an image loaded using CameraRoll on an AIR for iOS app.
This code below works fine (displayImage() is called when CameraRolls media event returns completed, and imageArea is the scrollPane where the image is shown.
     function displayImage():void
     var image:Bitmap = Bitmap(imageLoader.content);
     imageArea.source = image;
The image loads just fine untill I try to rotate it:
     function readMediaData():void
     var image:Bitmap = Bitmap(imageLoader.content);
     var imX:int = image.width;
     var imY:int = image.height;
          if (imX>imY)
              image.rotation = 90;
     imageArea.source = image;
With the second version the image seems to load because the scroll bars expand to the size of the image I choose, but I don't see anything on the stage.
What am I doing wrong?
Any suggestions would be really appreciated.

I added the new width back to images x position but no joy; no matter what x & y I set the image to, it cannot be seen. The scroll bars expand exactly the right amount for the 'invisible' image, regardless of it's x & y positions as well (you'd think if the image was out of the scrollPane the bars wouldn't adjust like that. I'm not doing something right.
I'm stumped on this but I'll keep trying things. Thanks for your help and the lead, I appreciate it and it may be part of the problem, but there seems to be a different problem as well.

Spry Image Slideshow with Filmstrip controls showing ABOVE images?

Hi all,
I've never used these forums before and apologise in advance for my first discussion being a request for help!
I recently added the Spry Image Slideshow with Filmstrip to a page and am not sure which property I need to modify to get the controls to show on top of the image. I think this is an issue with the two column layout I'm using but am not knowledgeable in the least about code and would appreciate your help.
http://gailspantry.com/testindex.
Many many thanks!
Rune

Hi folks, any ideas re this issue? Really hope someone can help.

Image rotation with spry

Similar Messages

Maybe you are looking for