|
JavaScript - Thumbnail Image Gallery
I need help finding a script where you have a main picture and then below that will be thumbnails and when you click on them they are shown where the main picture is.
Thank you Similar TutorialsHi, I'm have set up a gallery site, pretty standard stuff with thumbnails to the right and big image to the left. I would like to add a fade in on the big image when the thumbnail is clicked and don't really know how to implement it. The big images are contained in a div called <#left> while the thumbs are within a div called <div class="gallery"> I have searched Google and these forums for a solution but haven't had any luck...can anyone help me out with this? Thanks J Dear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles 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 Hello, Currently I'm looking at smooth scrolling Js scripts for thumb images which can be altered to accomodate needs. I found one here that has some desirable effects but has no navi buttons. Would it be sensible to alter and point the hovering mouse scroll function to buttons, or would it be a better idea to keep looking for exactly the right script? The 2 identical scrollers on this page are the look I want but these are flash; http://area.autodesk.com/ ps: I've no experience of Js but can pick things up pretty quickly. Hey all.. I just finished a semester at the local junior college in javascript programming. Didnt teach us very well, but I learned several basics. I have skills in several different aspects of programming now, but none as an expert by any means. Now, I am working on a project for my wife's non-profit that she is involved in, and an wanting to create a thumbnail sized picture 'band' at the top of my website, with images of things that she wants the user to be able to click on to pop up a bigger picture into a new window, a popup window, mind you. This 'image gallery', needs to be able to be clicked on to move the images to the left or to the right, and display, maybe 5 to seven images at a time in about a 100px height band. I have seen this on other websites before, and I have the software to do my own programming, and I 'should have' developed the skills by now, lol, but, I just need some help getting started in the right direction in knowing how to start out. Like, what do I need to accomplish to do this? I already have a div set up for the container for it. The website is using a combination of html, css, php, mysql and javascript. Thank you; Ice hi I am creating a gallery using my flickr feed. I have the bones of it working the only issue is with the thumbnail pulled from flickr. You get the option of small medium and large whicj Im using meduim. I want to add an image border around the thumbnails using a background image but when I add the styles it wont work. If i add a width to the img tag it will distrit the images because its being pulled from the flickr api anyone any ideas on how to get the background image working? html code is here Code: <body>
<!-- Some Content -->
<div id="gallery">
<input type='hidden' id='current_page' />
<input type='hidden' id='show_per_page' />
<div id="flickr">
</div>
<div id='page_navigation'></div>
</div>
</body>
CSS for the img is Code: [.hidden {
display: none;
}
div#flickr a.lightbox img {
border: 5px solid #b3aaa4;
margin-left: 5px;
margin-right: 5px;
margin-bottom:30px
}
and the java script is here Code: $(function() {
$.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
'&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?',
function(data){
var classShown = 'class="lightbox"';
var classHidden = 'class="lightbox hidden"';
$.each(data.photos.photo, function(i, rPhoto){
var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
+ rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;
var thumbPhotoURL = basePhotoURL + '_m.jpg';
var mediumPhotoURL = basePhotoURL + '.jpg';
var photoStringStart = '<a ';
var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
rPhoto.title + '"/></a>;'
var photoString = (i < showOnPage) ?
photoStringStart + classShown + photoStringEnd :
photoStringStart + classHidden + photoStringEnd;
$(photoString).appendTo("#flickr");
});
$("a.lightbox").lightBox();
});
});
anyone? I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>
HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> Hi, Hope that someone can help me with a little problem I have. I building a little page that has some photos of the family. Ive created little thumbnails and large versions of each image. What im trying to achieve is that in div a: i have each of the thumbnails and in div b: it displays a large verison on the image thats clicked. Ive seen a few methods when searching using java and ajax etc, but i'm not sure which is the best way to do this and the most simple so that I dont have to create a new page for each image. Thanks for your help in advance. Hi, I have a table with 2 colums, the left column is to preview image and the right column is for 4 small thumbnails. Iwant the preview picture to change when clicked on the individual thumbnail. Can someone please help me on this? Code: <table width="816" height="303" border="1">
<tr>
<td width="396" height="297"> </td>
<td width="404" valign="top"><table width="100%" border="1">
<tr>
<td width="52%" height="166"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200"/> </td>
<td width="48%"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
</tr>
<tr>
<td height="174"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
<td><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
</tr>
</table></td>
</tr>
</table>
Hey guys i'm making a clothing website and i was just wondering.. if i have a bunch of thumbnail sized images on the page atm, how would i go about so if people put their mouse over the thumbnail, it would load the full sized T-shirt? I obviously have the images on my computer and host for the Thumbnails and the Real-image sized shirts. Thanks xx Hello, I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document). Links: http://www.courtneyhunt.com.au/press_bg.html http://www.courtneyhunt.com.au/press_gallery.html I am a complete novice with JavaScript so if anyone could help that would be great. Thank you in advance. hello everyone. i am new to this forum and new with webdesigning.. i was wondering if anyone can help guide me to get the right coding im trying to make it so that when clicking thumbnails it will change the full screen background to its respective picture along with continuing its automatic slideshow www.petpawfurry.com is the website in which im working on. also, is there anyway to make the slider, slide to the right, instead of fading in and out? thanks so much, hope someone can help Hi, I'm new here and trying to get some basics via examples. On this page http://www.gilariverwoodworks.com/kitchens.htm I have thumbnails in a table. Immediately below the table is a full sized image of thumb 1. I want to mouseover the thumbs and have the respective full size images swap. The thumbs remain as is. All the thumbs are the same file as the full size image but resized. If moused over, the new image should remain until the next thumb is moused over - ie no autoclose or return to original image. The viewer should be able to move around the page without having the image change til the next mouseover All the images are the same size Can someone offer or direct me to a script that will do this? TIA mr johnson Hello, I would like some help with a two stage display of thumbnails. I have managed to display all thumbnail product images of my targetId in a scrolling div from the contents of my targetId image folder. I have also managed to display the thumbnail as a larger image in a html image. I would now like to apply a href link to the larger image so that I can display using jsquery lightbox, but I can't figure out what code i need and where it should go. Please help! Code: <head>
<script type="text/javascript">
function replaceImg(path) {
var imgDest = document.getElementById('image');
var imgSrc = path;
imgDest.setAttribute("src", imgSrc);
}
</script>
</head>
<body>
<div class="productimage"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></div>
<div class="gallerypics"><?php
$counter = 0;
foreach (glob("product_images/$targetID/thumb/*.jpg") as $pathToThumb)
{
$filename = basename($pathToThumb);
echo ('<div class="gallerypicsframe"><a href="javascript:replaceImg(\'product_images/'.$targetID.'/'.$filename.'\')"><img src="'.$pathToThumb.'"" width="60" height="90" border="0"/></a></div>');
$counter++;
}
?>
</body>
Hello, My site has an image gallery with a row of pictures at the bottom. When I load up the page it should show image 1 in the main gallery window, but instead it's showing image in position #10 (the one to the left of #1). You can see what I'm talking about here. When you load the page it's showing the White House, but it should be showing the Green House (position #1 in slider). The White House can't be seen in the slider since it's in position #10, but shows up first int the main window. Is this a javascript issue or what? All JS files can be found here Can anybody help me debug this?? I'm going nuts Thank you So I have a gallery which is displaying images from an array called imgList. When they are displayed I want the user to be able to link directly to the image. Is there a simple way to do this? The JavaScript: Code: //<!--
var imgList = new Array(
"images/gallery/1.jpg",
"images/gallery/2.jpg",
"images/gallery/3.jpg",
"images/gallery/5.jpg",
"images/gallery/6.jpg",
"images/gallery/duo.jpg"
);
var clientData = new Array(
'',
'',
'',
'',
'',
'',
''
);
var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";
function init(){
all_links=document.getElementById('gallery').getElementsByTagName('a');
all_links[0].style.color="#7d3d3d";
ShowMain(current_position);
}
function color_me(element,color){
element.style.color=color;
}
function Prev(){
color_me(all_links[current_position],'#000000');
if((current_position-1)>-1){
current_position=current_position-1;
}
else{
current_position=(all_links.length-1);
}
ShowMain(current_position);
// ShowMainT(current_position);
color_me(all_links[current_position],'#7d3d3d');
}
function direct_selection(number){
all_links[current_position].style.color="#000000";
current_position=number;
ShowMain(current_position);
all_links[current_position].style.color="#7d3d3d";
}
function Next() {
color_me(all_links[current_position],'#000000');
if((current_position+1)<all_links.length){
current_position++;
}
else{
current_position=0;
}
ShowMain(current_position);
// ShowMainT(current_position);
color_me(all_links[current_position],'#7d3d3d');
}
function ShowMain(which){
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').innerHTML = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');
document.getElementById("mainText").style.display = 'inline';
// return false;
}
onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->
//<!--
function preloader(){
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="images/gallery/1.jpg";
images[1]="images/gallery/2.jpg";
images[2]="images/gallery/3.jpg";
images[3]="images/gallery/5.jpg";
images[4]="images/gallery/6.jpg";
images[5]="images/gallery/duo.jpg";
// start preloading
for(i=0; i<=3; i++){
imageObj.src=images[i];
}
}
//-->
The HTML where it is displayed: Code: <img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" /> Hi I want to create an image gallery which has one main image (large size) with a series of smaller thumbnail images below. When you click on one of the smaller images below, I need it to load it into the space above. This series of images will be selected by a PHP script and a MySQL database. The ratios of the images will not always be the same, so the boundry box will need to change width and height accordingly. This will change the height of the page too I guess. Now, the real fly in the ointment is that I really would like the main image to have a drop shadow (gradient based) on all 4 sides of the image. So, good people of the JS Sub-Forum - whats the best way to get this done?! Cheers The Moose Hey all, I'm designing a website and i'm doing a section on a portfolio of artwork. wat i would like is to group the work under different headings and for each group to have a thumbnail of an image. when that image is clicked a window is opened which displays all the works in that group as thumbnails as well as an image gallery (larger image of the current image and being able to click on the other thumbnails to view a larger image of it). hope that makes sense. I've been searching all over for scripts bit nothing fits my criteria exactly. going a bit crazy over this, any help or direction much appreciated. peace Hi guys. I wanted to show you a gallery that I am doing. I'm stuck here with some issue. I've made the gallery with the buttons but now I wanted to add a previous and next button but I not being able to do. all the rest is working. the javascript code is this: Code: $(function () {
var imgContainers = $('div.tabs > div');
imgContainers.hide().filter(':first').show();
$('div.tabs ul.number_nav a').click(function () {
imgContainers.hide();
imgContainers.filter(this.hash).show();
$('div.tabs ul.number_nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
the html file is this: 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" xml:lang="en" lang="en"> <head> <title>gallery</title> <!--CSS--> <link href="style.css" rel="stylesheet" type="text/css" /> <!--JavaScript--> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="code.js"></script> </head> <body> <div id="gallery"><!--IMG CONTAINER START --> <div class="tabs"> <div id="image_01"> <div class="image"> <img src="image_one.png" width="795" height="395" /> </div> </div> <div id="image_02" > <div class="image"> <img src="image_two.png" width="795" height="395" /> </div> </div> <div id="image_03"> <div class="image"> <img src="and_so_on.png" width="795" height="395" /> </div> </div> <ul class="number_nav"> <li><a href="#image_01">01</a></li> <li><a href="#image_02">02</a></li> <li><a href="#image_03">03</a></li> </ul> <ul class="prev_next_nav"> <li><a href="#">Previous</a></li> / <li><a href="#">Next</a></li> </ul> </div> </div> </body> </html> here is the zip file: http://www.sendspace.com/file/we3lkd can someone help me to make the code to the previous / next code please? I'm not very good ( nothing at all ) with javascript... |
|||||||