FeaturePics in February
|
|
| Valentine's Day Images
|
|
We are offering these images to you in celebration of this most romantic of
days. These photos would be appropriate for promotions, t-shirts, or greeting
cards, so enjoy.
|
| Winter Images
|
|
Sterile, cold lanscapes, Nature is asleep, awaiting the rebirth of
Spring. Even though these images show the harshness of Winter, there
is also a timeless beauty in these photos.
|
| Winter Sport Images
|
|
Speed, ice, snow, hot buttered rum, wet socks, cold hands, all images of the
fun to be had when man plays in the snow. Lay back and enjoy the feeling
of fresh powder and the feelings afterward when the equipment comes off, and
you can relax in front of a warm fire.
|
This month's issue was composed using images by:
Gracey
SBStudios
Hunziker
Olesha
Cre8tive_studios
Nikonite
Gracey
Mocker
XenLights
Hamdan
Photoclicks
Nruboc
Pelmof
AlexMax
Velusariot
Hospitalera
|
|
FP Contributor, Hospitalera, had a question regarding a simple image gallery, (http://www.talkmicro.com/viewtopic.php?t=1179).
We decided to make a couple of examples using different techniques. All images
for these examples are from Hospitalera's portfolio.
In this example we used AJAX
Check Image Gallery example using
Javascript Arrays instead of AJAX.
"Ajax; shorthand for Asynchronous JavaScript and XML, is a web development
technique for creating interactive web applications. The intent is to make web
pages feel more responsive by exchanging small amounts of data with the server
behind the scenes, so that the entire web page does not have to be reloaded
each time the user requests a change. This is meant to increase the web page's
interactivity, speed, and usability."
http://en.wikipedia.org/wiki/Ajax_(programming)
|
Image container:
|
Image Name Container:
Illustration of Metalheart
Image Link Container:
Click
here to buy this image
General Description Container:
Hospitalera can render fractals to specifications, so if you need to
illustrate a special project, contact Hospitalera via FeaturePics or via
Hospitalera's Website
|
Image thumbs container:
This first example shows how you can use your own small "database" of images
using the AJAX technique.
Information about each image (image file, image name, image url) is saved in
the xml file. When you click on a thumbnail, the javascript function reads
information about the image from this xml file.
Then the same javascript functions "forms" inner HTML code for the bigger image
container, image name container, and image link container.
You can rearrange the positioning of all containers according to your web page
layout.
|
| Step 1: form your xml file as
|
<item>
<i>FI/Thumb300V/20060907/Metalheart82257.jpg</i>
<d>Illustration of Metalheart</d>
<l>http://www.featurepics.com/online/MetalheartIllustrations82257.aspx</l>
</item>
|
| The element "i" holds a larger image thumbnail file, element
"d" holds image description, and element "l" holds a larger
thumbnail url.
|
In our case xml has a name "data.xml" and has the following nodes:
|
| Step 2: Place the javascript function in the <head> part of your web page.
|
This part of your javascript function is reading data from the "data.xml" file:
var xmlhttp = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") :
new XMLHttpRequest();
xmlhttp.open('get', "data.xml",true);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4)
{
try
{
i =res.getElementsByTagName('i')[n].firstChild.data;
d=res.getElementsByTagName('d')[n].firstChild.data;
l=res.getElementsByTagName('l')[n].firstChild.data;
...FORM INNER HTML...
}
catch(e)
{
...CATCH ERRORS...
}
}
}
xmlhttp.send(null);
|
This part of your javascript function forms an inner HTML for the containers:
image=document.getElementById('im');
desc = document.getElementById("desc");
desc.innerHTML = d;
lnk = document.getElementById("lnk");
lnk.innerHTML = "Click <a href='"+l+"'>here</a> to buy this image";
li = document.getElementById("li");
li.innerHTML = "<a href='"+l+"'><img src='"+i+"'
border='0'></a>";
|
Your resulting AJAX script:
|
| Step 3: Design your page, place containers "desc" (image description), "lnk"
(image link), "li"(large thumbnail) according to your layout.
|
| In our case we placed all <div> containers inside of the table, but you
can position them using CSS.
|
|