So, to wrap things up:

- container div:

#container {
position: relative;
}

- image div (or just image tag) – has nothing special, maybe remove its borders…

#container img {
border: 0;
}

- text div (or a special tag, like “h2″)

#container h2 {
display: block;
position: absolute;
top: 10px;
left: 0;
width: 100px;
height: 30px;
color: white;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.15);
}

#IEroot #container h2 {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000,endColorstr=#40000000);
zoom: 1;
}

For IE compatibility, you need to use conditional statements. This is done by adding this code before the container div:

<!--[if IE]>
<div id="IEroot">
<![endif]-->

and this code after the container div:

<!--[if IE]>
</div>
<![endif]-->

$.getJSON("http://just.another.domain/myscript.php?param="+param+"&callback=?", function(vals) {
	for(var i in vals) {
		// do something with each value
	}
} );

The code for myscript.php could be something like this:

<?php
// ... do some processing (based on $_GET['param'])
array_push($results, $val1);
array_push($results, $val2);

echo $_GET['callback'] . '(' . json_encode($results). ');';
?>

jQuery automatically generates a function name and puts it in the place of the second ‘?’, so the function to be called from the PHP-generated JavaScript is available in the ‘callback’ parameter. All that the PHP script has to do is to output a function call using that function name. As a parameter to that function, we put a string with JSON-encoded data. It has to be JSON-encoded, because the parameter is automatically eval’d in the jQuery.
So, with these two restrictions (data has to be packed as JSON and the server script has to output a JavaScript function call), you can transmit data between cross-domain scripts.

Well, the need appeared when I started to build a Mac OS Dashboard Widget, that had to show some values on an analog display. I needed to rotate the image with the needle by an angle proportional to the value. The angle of rotation had to be modifiable from JavaScript. The Dashboard engine is based on WebKit component, and the widget itself is able to run on Safari as well. So the need to rotate an image on a web page is the generic issue that I had to solve.

The solution is to use the <canvas> tag, available in HTML 5 and  implemented by Safari browser, Gecko-based browsers (like Firefox) and Opera. The image would be drawn on the canvas that can rotate.

The issue with this method is that the canvas rotates around the top left corner. The needle has to be rotated around its rotation center, which is located somewhere inside the image, not on its corner. So a trigonometric transformation had to be implemented (which includes translation and rotation), so that the needle will appear to rotate around its rotation center, not the image corner.

The JavaScript code that implements the rotation is the following:

function drawImg(canvas, src, angle, centru_ox_delta, centru_oy_delta, canvas_width) {
   var myImg = new Image();
   myImg.src = src;
   myImg.angle = angle;
   myImg.canvas = canvas;
   myImg.oxd = centru_ox_delta;
   myImg.oyd = centru_oy_delta;
   myImg.canvas_w = canvas_width;
   myImg.onload = imageLoadedRotate;
}

function imageLoadedRotate( evt ) {
   var canvas = document.getElementById(this.canvas);
   if(canvas)
      var ctx = document.getElementById(this.canvas).getContext('2d');
   if (ctx) {
      ctx.save();
      ctx.clearRect(0,0,250,250);
      ctx.translate( this.canvas_w*Math.sqrt(2)/2*(0.7 - Math.cos((this.angle+45) * Math.PI / 180)), this.canvas_w*Math.sqrt(2)/2*(0.7 - Math.sin((this.angle+45) * Math.PI / 180)) );
      ctx.rotate(this.angle * Math.PI / 180);
      ctx.drawImage(this, this.canvas_w/2-this.oxd, this.canvas_w/2-this.oyd);
      ctx.restore();
   };
}

The “drawImg” function creates a new Image object, sets its source (the URL of the needle image), sets its “loaded” callback and sets some other custom properties of the object, that will be used in the callback functon. The callback function is “imageLoadedRotate”, which obtains the 2d context of the canvas, with which we can draw images on the canvas. We first position the context to the new position, we rotate it, and then we draw the image. The image will appear rotated because the context is rotated. The context properties are first saved, so we can restore them afterwards, because the context will be reused and we need to rotate the images relative to their initial position (vertical, in our case).

The “imageLoadedRotate” function also makes the transformation between the degrees value that we use and the radians value that the rotation function understands.

The parameters of the “drawImg” function are:

• canvas – the id of the canvas to use (<canvas id=”canvas_id” width=”250″ height=”250″></canvas>)
• src – the URL of the image to draw
• angle – the angle of rotation
• centru_ox_delta – the Ox coordinate of the rotation center of the image, relative to the image’s left edge
• centru_oy_delta – the Oy coordinate of the rotation center of the image, relative to the image’s top edge
• canvas_width – the canvas size (width=height, because we used only square canvases, for ease of calculation

The first thing to try was searching an already-made module for wordpress. I couldn’t find one that was the way I wanted – either they were old, not working, bulky, slow, ugly, or they were not free.

So then I decided to manufacture one myself. The first step was to find an imageflow control, not too complicated, free and nice-looking. I found this ImageFlow control which is customizable, free and cute. It isn’t exactly the fastest (it uses JavaScript quite a lot), but it is clean and straightforward. I uploaded the folder extracted from the downloaded archive in my theme folder (I integrated it directly in my theme). Then, in the header.php file I added the references:

<?php /* ImageFlow Object */ ?>
<?php if(is_home()) { ?>
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/ImageFlow/imageflow.css" type="text/css" />
<script src="<?php echo bloginfo('template_url'); ?>/ImageFlow/imageflow.js" type="text/javascript"></script>
<?php } ?>

In the index.php file, I added this:

<div id="myImageFlow" style="width: 600px; ">
<?php
// show all images in a folder
$dirname = "/imageflow/";
$dir = opendir($dirname);
while(false != ($file = readdir($dir)))
{
   if(($file != ".") and ($file != "..") and strpos($file, 'refl_')!==0 )
   {
      echo "<img src=\"/imageflow/{$file}\" longdesc=\"/imageflow/{$file}\" alt=\"\" />\n";
   }
}
?>
</div>

The code above lists all the images in the “imageflow” folder. I rejected the files that have names starting with “refl_” because they are cache files created by ImageFlow for reflections. If I was to show them too, the reflection of reflection appeared, and so on…

I also wanted to display the images on white, to hide the slider and to open all the images in a LightBox. For this, I installed the plugin “Shadowbox JS”, an excellent plugin that allow to view images, movies, html in an shadowbox (like the lightbox). The plugin is based on the Shadowbox.js library. Then I modified the file “imageflow.js” to include the needed features:

instanceOne.init({ ImageFlowID:'myImageFlow', buttons: true, captions: false, onClick: function() { Shadowbox.open({content:    this.url, player: "img"}) }, slider: false, reflectionGET: '&bgc=ffffff', opacity: true });

This line is at the end of the file, in the function “domReady”. I included the onClick event to call for the Shadowbox.js library.

And… that was it. You can admire the result on the first page (at least for now )

UPDATE:

I received some complaints that the ImageFlow control on the first page is slow. That was because I was loading with it high-res images, which were afterwards showed with Shadowbox. This wasn’t good at all, so I cropped and resized the images, so that now they are square and much smaller (150×150 px). I renamed them “thumb_xxxx”, where xxxx is the original name of the file. Then, in the index.php file of the theme, I updated the ImageFlow code like this:

$dirname = "/imageflow/";
$dir = opendir($dirname);
$names = array();
while(false != ($file = readdir($dir)))
{
   if(($file != ".") and ($file != "..") and strpos($file, 'thumb_')===0 )
   {
      $val['thumb'] = $file;
      $val['img'] = substr($file, 6, strlen($file));
      $names[] = $val;
    }
}

asort($names);
foreach($names as $name) {
   echo "<img src=\"//imageflow/".$name['thumb']."\" longdesc=\"/imageflow/".$name['img']."\" alt=\"\" />\n";
}

I used an array to sort the images by their filename.

The second issue was that when viewing a large image with Shadowbox, I couldn’t browse through the rest of the gallery’s images. For this, I had to modify the imageflow.js file, so that the last function in it looks like this:

domReady(function()
{
   var instanceOne = new ImageFlow();
   var myImages=new Array();

   var ImageFlowDiv = document.getElementById('myImageFlow');
   var max = ImageFlowDiv.childNodes.length;
   for(var index = 0; index < max; index++)
   {
      node = ImageFlowDiv.childNodes[index];
      if (node && node.nodeType == 1 && node.nodeName == 'IMG')
      {
         var src = node.getAttribute('src',2);
         src=src.replace("/thumb_","/");
         myImages.push({content: src, player: "img"});
      }
   }

   instanceOne.init({ ImageFlowID:'myImageFlow', buttons: true, captions: false, slider: false, reflectionGET: '&bgc=ffffff', opacity: true, aspectRatio: 2.65, startID: 5 });
   instanceOne.onClick = function() {
      var index=0;
      for(img in myImages) {
         if(myImages[img].content == this.url)
         index=parseInt(img);
      }
      Shadowbox.options.onOpen=function() {
         Shadowbox.current=index;
      }
      Shadowbox.open(myImages);
   }
});

The code now loads all the image files specified for ImageFlow, eliminates the “thumb_” prefix, and builds a gallery. Then, when opened, it identifies the image that has been clicked in ImageFlow (comparing their paths) and sets the current image to that one (so that when clicking, say, the second image, the Shadowbox gallery opens up and the second image is shown). This one was quite tricky, because I had problems finding a way to set the current image after loading a gallery in Shadowbox (I used the onOpen hook).

Oh, and for the ImageFlow to work, when using reflection the reflect2.php or reflect3.php file has to be copied in the root folder of your site!

So… this would be it

I discovered, after some search, the plugin deviant-thumbs, which actually got updated to version 1.9.2. It works great – it uses the SimplePie engine included in WordPress, which caches the data, offers the possibility to add several widgets to the sidebar and… looks ok. The only thing that I couldn’t figure out why isn’t working is the search string – I wanted to show just my favs, so I used the search string “favby: myusername”. It didn’t take into account any search string – it was showing random images. The feed content is saved in the table “wp_options”, in the records with the option_name like “_transient_timeout_feed_mod_xxxxxxxx”, “_transient_timeout_feed_xxxxxxxx”, “_transient_feed_mod_xxxxxxxx” and “_transient_feed_xxxxxxxx”. These records can be deleted to empty the feed cache. If you delete all the records with these names, the cache for all feeds of the site will be emptied. When refreshing the page, if you use the widget, the cache will be rebuilt.

The issue was in the function “remote_get”, found in the file “deviant-thumbs.php”, around line 75. There, the url used included the search string, but it wasn’t url-encoded.

You should modify the line 73 so that it looks like this:

$url  = add_query_arg('q', urlencode($query), 'http://backend.deviantart.com/rss.xml?type=deviation');

Of course, when clicking on an image, a new window should be opened with the DeviantArt page, so that the user shouldn’t exit the current site. A small modification at line 110 in the same file solved the problem (I added “target=’_blank’”):

$thumbs[] = "<a title='$title' href='$link' target='_blank'><img src='$src' /></a>";

So now I can enjoy scribu’s “deviant-thumbs” plugin at its fullest!