|
JavaScript - Js Photo Slideshow
Hi, I am somewhat new to javascript and website design, (as in I mostly try to follow tutorials to figure how stuff works) and was wondering how I would make a rotating photo slideshow (in js).
Such as in the following sites: http://www.1stwebdesigner.com/wp-con...inal_small.jpg and http://www.1stwebdesigner.com/wp-con...inal_small.jpg (but instead of clicking on the photos to rotate, an arrow to rotate, such as in the first image/example) Thanks so much in advance Similar TutorialsHello - My question revolves around a photo slider that will automatically advance to the next photo in a matter of seconds. . . Before you write this thread off as, 'GO GOOGLE IT, THERE'S TONS OF CODE ALREADY OUT THERE IN THREADS LIKE THIS'. . . The tricky part of this is, I already have a photo slider that you advance by a button click and it transitions 2 portions of the page. It is a custom module in Joomla that just basically uses some custom HTML to display a picture on the left and text on the right. . .and you click the button and it advances to another picture and different text to match the image. HERE IS MY CURRENT HTML THAT DISPLAYS THE IMAGE AND TEXT Code: <div class="images"><!-- first slide --> <div><img class="img-slider" src="images/stories/slider_img_1.jpg" border="0" /> <span class="slider-text-indent"> <h3 class="slider-titile">We listen.</h3> <span class="slider-text">Tired of unreliable computer consultants who are impossible to reach, nickel and dime you, and fail to deliver results that you deserve?<br /><br />ABC Computers is here to help you!</span> </span></div> <!-- second slide --> <div><img class="img-slider" src="images/stories/slider_img_2.jpg" border="0" /> <span class="slider-text-indent"> <h3 class="slider-titile">We Guarantee.</h3> <span class="slider-text">We are committed to doing whatever is necessary, period. In our 25 history, we have never had a failed implementation; we guarantee yours will not be the first.</span> </span></div> <!-- third slide --> <div><img class="img-slider" src="images/stories/slider_img_3.jpg" border="0" /> <span class="slider-text-indent"> <h3 class="slider-titile">We Care.</h3> <span class="slider-text">We treat your network as if it was our own. We protect your data as if it was ours. We don't look at your budget as a mine of money; we won't ask you to spend one dollar that we wouldn't spend on our own network!</span> </span></div> </div> <p><a class="backward">prev</a> <a class="forward">next</a></p> <!-- the tabs --> <div class="tabs"><a></a> <a></a> <a></a></div> Again, I would like to make this advance automatically through javascript (or perhaps there's a better way). . . but I do not want to lose the functionality of moving it manually with the button too. Is this possible to do and if so, does anyone have suggestions? Typically this isn't an issue for me to figure out but since I already have it how the client wants it to look, they basically want it to move automatically as if someone pushed the button. . .but still keep the manual button to advance and reverse it. Thank you in advance for any advice or help on this matter. Hey guys I'm need to put a photo slideshow on my website with a lot of images. I don't want all the images to download as you come to the website as this would take forever. Are there any pretty simple slideshows that load images just before they are about to come in the view?
Reply With Quote 01-25-2015, 01:07 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts How will the program know which image is "about" to come into view? Or are they viewed sequentially? If so there is no need for preloading images to take "forever". Preload the first (say) 5 and then preload the rest while the user is viewing the first ones. Or when each "next" image is selected for viewing preload the next following one. NOT SURE WHAT IS GOING ON, WHEN I COMMENT OUT THE CREATE ARRAY FUNCTION EVERYTHING SEEMS TO WORK FINE, SO WHAT IS UP WITH THE CREATEARRAY FUNCTION???? 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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Photoviewer</title>
</head>
<body bgcolor="#FFF1CC">
<h1><u> Viewer </u></h1>
<p>
<img id="myImage" src="InitialImage.jpg" width="444" height="293" alt="viewerImg" />
</p>
<hr />
<!--Entry boxes-->
<form action="" method="post">
<p>Photo's Folder
<input type="text" id="photofold" value="umcp/" /><br />
</p>
<p>Common Name
<input type="text" id="commonName" value="college" /><br />
</p>
<p> Start Photo Number
<input type="text" id="Startval" value="1" />
</p>
<p>End Photo Number
<input type="text" id="Endval" value="1" />
</p>
<!--Action buttons-->
<p>
<input type="button"id="displayShowButton" value="Slide Show" />
<input type="button"id="displayRandoButton" value="Random Slide Show" />
<input type="button"id="displayNextButton" value="Previous Slide" />
<input type="button"id="displayLastButton" value="Next Slide" />
</p>
<!--Reset Button-->
<p>
<input type="reset" value="Reset" />
</p>
</form>
<script type="text/javascript">
/*<![CDATA[*/
/*setting global variables*/
var photosArrayGlobal;
var photoIndexGlobal;
var displayGlobal=document.getElementById("myImage")
/* calling main */
main();
function main() {
document.getElementById("displayShowButton").onclick= setSequential;
document.getElementById("displayRandoButton").onclick=setRandom;
}
/*Generate the size of the photoarrays */
function createArray() {
window.alert("create array");
if (number > 0) {
window.alert("there are"+number+"photos in your range");
photosArrayGlobal= new Array (number);
return photoArrayGlobal;
getArrayPhotosNames();
}
Else {
window.alert("there is one photo in your range");
photosArrayGlobal = new Array (1);
return photosArrayGlobal;
getArrayPhotosNames();
}
}
/*Designate that either a random or a sequential order has been requested,sequential=1/random=0*/
function setSequential() {
var mode= 1;
window.alert("set sequential");
checkRange();
}
function setRandom () {
var mode= 0;
window.alert("set random");
checkRange ();
}
/*make sure end is start is less than end*/
function checkRange() {
window.alert("check range");
var Start= document.getElementById("Startval");
var Startnum = Start.value;
var End = document.getElementById("Endval");
var Endnum = End.value
if (Endnum < Startnum){
window.alert("Invalid Numbers");
}
else {
window.alert("correct input");
var range = Endnum - Startnum;
window.alert(range);
var number=Number(range);
createArray ();
}
}
/* This function will read the folder name, common name, start photo number, and end photo number and will return an array with the names of the photos that belong to the specified number range. Each photo's name consists of the folder name, followed by the common name, the photo's number and the ".jpg" extension*/
function getArrayPhotosNames () {
window.alert("all done for now");
}
/*]]>*/
</script>
</body>
</html>
I am designing a custom wordpress blog for a client. He had asked for four sections to have a picture gallery fitting the format of the rest of the site with the simple functions of next and back. I found a gallery online ( http://www.web1marketing.com/photoviewer/ ) that had the elements I needed, customized the sizes. I made a working test version in the site that works great. http://californiaisaplace.com/cali/test/ When I added the same code into the full site the URL address is changing but the photos are not ? http://californiaisaplace.com/cali/c...os/#cannonball Not knowing Javascript I am having trouble troubleshooting the issues. Can any one give me any advice on this? Plz i want to make a photo gallery of many images... i want it to be enlarged with an effect.. i have a thumbnails images and large images i want the thumbnails to be enlarged with any effect and to be displayed on the same page .. can anyone send for me a new photo gallery effect? Im new to javascript and I need to make a website for my computer science class that includes a photo gallery within a table and there has to be two buttons on top so you can scroll through the pictures.. a next and a back button. here is a link to the assignment http://montcs.bloomu.edu/110/Asns/As...-changer.shtml.. here is our teachers example http://myweb.bloomu.edu/rmontant/pictures-project.. I tried to make my website but i am stuck! heres the code for mine and if anybody could tell me what the hell im doing wrong it would be greatly appreciated.. Thanks in advance <html> <head> <title>GMC Duramax Photo Gallery</title> <style type="text/css"> p.pretty{ font-family: "Marker SD" ; font-size: 20pt ; } Img#pix { width:800px;} table {border-collapse: collapse; border: 8px inset rgb(255,140,0); width:800px; background: rgb(0,0,128); color: rgb(255,255,255); } td {border: 1px solid black; text-align: center;} </style> <script type="text/javascript"> var piclist = [ "Chevy1.jpg" , "GMC1.jpg" , "Ironhide.jpg" , "Chevy2.jpg" , "Monster.jpg" , "DenaliHD.jpg" , "DenaliHD1.jpg" , "3500HD.jpeg" , ] Var i = 0; function next() { var elt = document.getElementById "Chevy1.jpg", "GMC1.jpg", "Ironhjide.jpg", "Chevy2.jpg" el1.src = "images/" + piclist [ i ] ; el1.style.width = "800px" ; el1 = document.getElementDyId("caption") ; el1.innerHTML="number" +i+ ":" piclist[i] ; i=i+ 1;/ if (i>=piclist.length) i = 0; } function prev() { var elt = document.getElementById("pix") ; el1.src = "images/" + piclist [ i ] ; el1.style.width = "800px" ; el1 = document.getElementDyId("caption") ; el1.innerHTML="number" -i- ":" piclist[i] ; i=i+ 1;/" Comment: This counts UP, to next picture. "/ if (i>=piclist.length) i = 0; } </script> </head> <body> <p class="pretty"> GMC Trucks </p> <table> <tr><td> <button onclick="prev();"> Backward </button> <button onclick="next();"> Forward</button> </td></tr> <tr><td> <img id="chevy1.jpg" src="Chevy1.jpg"> </td></tr> <tr><td id="caption"> Lifted Chevy 2500HD</td></tr> </table> </body> </html> Hi! I've been working on a javascript photo gallery on my talent agency's website. I'm running into a bit of trouble with two things... First off, i would like it that when the mouse is removed from the thumbnail, that the image the mouse was last on would remain on screen but the thumbnail wouldnt change back. Also, i cant figure out how to make it that when an image is being displayed, the photographer and makeup artist information could also be seen under the picture. Any help in this would be GREATLY appreciated! A sample of one of the pages this is being used on is the following: http://www.cyanidenation.com/dakygallery.html The code I'm using is the following: Code: <!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Thanks for the help! Hello, Do you know any HTML/Javascript/JQuery photo gallery which behave like this flash gallery? http://www.erwinolaf.com/#/portfolio..._2001/gallery/ The point is images : 1- Images does not show in a modal popup window. 2- When each thumbnail selected , current image animate to left and selected image also shown with comming from right to left. Thanks Mazdak hi can anyone help me how can user change the photo on the same page my code is Code: <body>
<img src="photo1.cgi" style="cursor:move" align="left"/></div></th><br />
<a href="photo1.cgi" >photo1.cgi</a><br />
<a href="photo2.cgi" >photo2.cgi</a><br />
<a href="photo3.cgi" >photo3.cgi</a><br />
<a href="photo4.cgi" >photo4.cgi</a><br />
</body>
i want when user selects photo2 to change this Code: <img src="photo1.cgi" style="cursor:move" align="left"/></div></th><br /> to Code: <img src="photo2.cgi" style="cursor:move" align="left"/></div></th><br /> Thanx in advance http://www.premierleague.com/page/Ga...047853,00.html
Is it possible to modify the code I am using in this example to create multiple photo galleries on the same page (basically one for each horse - set up exactly like the example)? There is also some CSS that is connected to this photo gallery. I know CSS a bit more than I know javascript...which I suppose isn't really saying much, since I don't know javascript at all. Also, how much of the code should I post, considering it's a multiple parter? Many thanks! Dear all, I'm trying to use Javascript to have an array of images that load randomly AND work in a slideshow manner so change every 3 seconds (in a logical order). The code I have below presents a random image but how do I get them to continue from the random image and change to the next every 3 seconds? Code: <script language="JavaScript"> images = new Array(3); images[0] = "<a href = 'photo1.html'><img src='images/photo1.jpg' alt='Photo 1'></a>"; images[1] = "<a href = 'photo2.html'><img src='images/photo2.jpg' alt='Photo 2'></a>"; images[2] = "<a href = 'photo3.html'><img src='images/photo3.jpg' alt='Photo 3'></a>"; index = Math.floor(Math.random() * images.length); document.write(images[index]); </script> Kind regards Jon I recently asked here about flash software for creating a gallery for my photoblog, but I now relaise I want something that's probably far more straight forward (I hope). What I want is for the first image in a set to load when the user clicks a category link (say Landscapes, for instance). Somewhere alongside the image will be a list of numbers or titles which, when hovered over with the mouse cursor, will change the image to the next in the set. Here's an example of exactly what I want: http://www.toddhido.com/ Hover over 'photographs >> homes at night >> houses' to get to one of the galleries. Is this simple coding? If it's not too much trouble, a very basic step-by-step on how I might acheive this would be very much appreciated. Hi Everyone, I am unable to find a JavaScript picture viewer that does what I would like it to do. I have created a wrapper div of specific size for the images to be displayed in. I want the thumbnail images to be horizontally at the top of the div and the "clicked" full-size image to appear within the same div, directly below the row of thumbnails. When a visitor opens the page the first image must be loaded automatically without having to click on the thumbnail. Can anyone point me in a direction please? Anita, Cape Town. Can anyone recommend a good photo gallery? My client would like to be able to upload her own photos and wants to be able to add captions (a must). Can anyone recommend a good canned galley, or let me know where I could find some code? I found an exellent free gallery called "Pure Gallery" which is a front end that works with "Gallery CMS" (backend). It is actually creates an swf file and has an interface for the client, but the problem is that it leaves about a 300 pixel gap at the top of the gallery and I cannot for the life of me figure out how to change it. It is awesome, but the gap at the top makes it useless to me. Thanks much. Buffmin. PS: If anyone wants to see what "Pure Gallery looks like, you can see it at this link to my site. http://q1ofakind.com/gallerycms/gallery.php
Hi I have a script that is driving me slightly crazy...I need to use different images as the thumbnails on this page. I want to use specified crops of the image rather than what is there now (the larger image squeezed down). Does anyone have any idea how I could do that? Thanks a million. http://www.annaleithauser.com/rosema...e/country.html I am having a problem with making the images come back after they are hidden by the hide me css. Html Code: <div class="photo_container"> <div class="sorting"> <div> <span>Filter photos by</span> <a class="sortLink selected" data-keyword="all" href="#">All categories</a> <a class="sortLink" data-keyword="creative" href="#">Creative</a> <a class="sortLink" data-keyword="portrait" href="#">Portrait</a> <a class="sortLink" data-keyword="event" href="#">Event</a> <a class="sortLink" data-keyword="advertising" href="#">Advertising</a> <a class="sortLink" data-keyword="nature" href="#">Nature</a> <a class="sortLink" data-keyword="architecture" href="#">Architecture</a> <a class="sortLink" data-keyword="model" href="#">Model</a> <a class="sortLink" data-keyword="food" href="#">Food</a> <div class="clear-fix"></div> </div> </div> <div class="photos"> <div class="thumbnail_container"> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> </div> </div> <div class="debug-size" style="position:absolute; bottom:0px; left:5px">debug size</div> <div class="debug-remainder" style="position:absolute; bottom:25px; left:5px">debug remainder</div> </div> Javascript Code: var thumbnailSpacing = 15; $(document).ready(function(){ $('.photo_container .sorting a.sortLink').on('click', function(e){ e.preventDefault(); $('.photo_container .sorting div a.sortLink').removeClass('selected'); $(this).addClass('selected'); var keyword = $(this).attr('data-keyword'); alert(keyword +' keywordset sort link'); sortThumbnails(keyword); }); $('.photo_container .sorting').css('margin-bottom', window.thumbnailSpacing+'px'); $('.photo_container .photos .thumbnail_container a.thumbnail').addClass('showMe'); positionThumbnails(); }); function sortThumbnails (keyword){ //alert(keyword); $('.photo_container .photos .thumbnail_container a.thumbnail').each(function(){ var thumbnailKeywords = $(this).attr('data-keywords'); //alert(thumbnailKeywords +' keyword thumbs'); if(keyword == 'all'){ $(this).addClass('showMe').removeClass('hideMe'); }else{ if(thumbnailKeywords.indexOf(keyword) != -1){ //alert(thumbnailKeywords.indexOf(keyword) +' index keyword'); $(this).addClass('showMe').removeClass('hideMe'); }else{ $(this).addClass('hideMe').removeClass('showMe'); } } }); positionThumbnails(); }; function positionThumbnails(){ /* debug */ $('.debug-remainder').html(''); $('.photo_container .photos .thumbnail_container a.thumbnail.hideMe').animate({opacity:0}, 500, function(){ $(this).css({ 'display':none, 'top':'0px', 'left':'0px' }); }); var containerWidth = $('.photo_container .photos').width(); var thumbnail_R = 0; var thumbnail_C = 0; var thumbnailWidth = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerWidth() + window.thumbnailSpacing; var thumbnailHeight = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerHeight() + window.thumbnailSpacing; var max_C = Math.floor(containerWidth / thumbnailWidth); $('.photo_container .photos .thumbnail_container a.thumbnail.showMe').each(function(index){ var remainder = (index%max_C)/100; var maxIndex = 0; /* debug */ $('.photo_container .debug-remainder').append(remainder+' - '); if(remainder == 0){ if(index != 0){ thumbnail_R += thumbnailHeight; } thumbnail_C = 0; }else{ thumbnail_C += thumbnailWidth; } $(this).css('display','block').animate({ 'opaciry':1, 'top':thumbnail_R+'px', 'left':thumbnail_C+'px' }, 500); var newWidth = max_C + thumbnailWidth; var newHeight = thumbnail_R + thumbnailHeight; $('.photo_container .photos .thumbnail_container').css({ 'width': newWidth + 'px', 'height': newHeight + 'px' }); }); } Thank you ahead of time for any help given... my brain hurts! Hi. I am trying to set up a photo gallery on a website using the Galleria Javascript. I managed to setup one gallery but I don't know the code to setup another or another two galleries on the same one page. Can anyone help me urgently? When I try to post the code twice, it gives an error message. The java script code is below: Code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.5.min.js"></script>
</head>
<body>
<div align="center">
<div id="gallery"> <img alt="Admin team." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo1.jpg" /> <img alt="Ladies In Session!" src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo2.jpg" /> <img alt="Ladies in Worship." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo3.jpg" /> </div></div>
<script> Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); $("#gallery").galleria({ width: 540, height: 540 }); </script></div>
</body>
</html>
I am still new to programming and so have no idea in how to adapt this script to make two or three galleries on the same page. The website address is: http://www.raisingsistersconference....togallery.html Thanks so much. I've got this little chunk of code running on my freelance portfolio site - on each page (different sections of my portfolio) I have 6 thumbnails and a full sized graphic with some descriptive info, you click the thumbnail and it switches the graphic and other info, that all works fine. But on one page I have some web stuff and I'd like to make the var 'clientinfo' into a link to go to the client's website. I know I need to add an array with the website links, but then I'm not sure how to implement it into the html, I've tried various things I've found on here but I'm not getting anywhere on my own. I know it's something pretty simple (for someone who knows what they're doing) but I just can't seem to grasp it. Can anyone help? the js is like this: $(function() { $(".image").click(function() { var image = $(this).attr("rel"); var title = $(this).attr("title"); var description = $(this).attr("content"); var clientinfo = $(this).attr("clientinfo"); $('#gallery').hide(); $('#gallery').fadeIn('slow'); $('#image').html('<img src="' + image + '"/>'); $('#title').html(title); $('#description').html(description); $('#client').html(clientinfo); return false; }); and then the HTML anchors are like this: <a href="#" rel="images/gallery/web/site1.png" title="Site One" content="This is the descriptive info for site number one" clientinfo="Site One link" class="image"><img src="images/gallery/web/t_site1thumb.png" class="thumb" border="0"/></a> |
|||||||