JavaScript - Image Gallery Captions

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...

Does anyone know of a good webscript slideshow on a loop that I can use in a website ?

www.chagfordshow.com We don’t want a database at the moment. Needs to work in all browsers.
What I’m looking for :-

Change the image every few seconds.
Slip into any element of the webpage.

All images will be the same size. Some landscape, some portrait.

Looking for this to work all in client’s scripting. or maybe AJAX




Thanks. Most grateful if anyone can 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

Hello. I am having trouble with a simple image gallery with navigational buttons including "first", "next", "previous", and "last"; and making a drop-down archive menu.

1. For the most part, the image gallery works. The problem is that when a user clicks on "next", and then "prev", the last image is not displayed. On the other hand, if a user clicks "prev", and then "next" the last image is displayed(works normally).

2. The way I am displaying the last image, the function last(), is not efficient. It simply refreshes the page in order to display the last image.

Basic overview: The images follow a simple standard: page1, page2, page3,...page64; they are in a subfolder "img". The function changeImage() changes the image from the prev, to the next. The image gallery displays the last image in the gallery; when a user clicks on 'prev' it goes to the previous image, and go to the next image when clicked on 'next'. If the current image is the last image, and the user clicks on 'next', it goes to the very first image.

Here is the code (in the <HEAD> tags):
Code:

<script language="JavaScript"><!--
which_image_loaded = -1;
NUMBER_OF_IMAGES = 64;
current_comic = 0;

ImageNames = new Array;
ImageNames.length = NUMBER_OF_IMAGES - 1;

for (counter = 0; counter < NUMBER_OF_IMAGES; counter++){
    file_number = counter + 1;
    filename = ("../img/page" + file_number + ".png");
    ImageNames[counter] = filename;
}

function changeImage(direction) {
	which_image_loaded += direction;
	current_comic = which_image_loaded + 1;
	
    if (which_image_loaded < 0)
        which_image_loaded = NUMBER_OF_IMAGES - 1;
    if (which_image_loaded == NUMBER_OF_IMAGES)
        which_image_loaded = 0;
   	if(current_comic <= 0){
		which_image_loaded--;
	}
	document.myimage.src = ImageNames[which_image_loaded];
}

function first(){
	which_image_loaded = 0;
	current_comic = 1;
	document.myimage.src = ImageNames[0];
}

function last(){
	window.location='http://www.bearoncampus.com';
}

and in the <BODY> tags

Code:

<img src="img/page64.png" alt="New comic not available." name="myimage" width="725" height="275">

<form>
<input type="button" value="FIRST" onClick="first()"/>
<input type="button" value="PREV" onClick='changeImage(-1);' />
<input type="button" value="NEXT" onClick='changeImage(1);' />
<input type="button" value="LAST" onclick="last()" />
</form>

My guess is the code is not working properly due to the initial values of the counter.

Last, is there a way to display the current image "myimage.src" using a dropdown menu with each option value as each image? I have done this with window.location, but this only redirects to the image location.

Much thanks. Any help is greatly appreciated.

hi i just ripped stepcarousel out of my file (i never could fix the offset parent error so i just took it out) and i was looking at CMotion Image Gallery


the problem is i dont need it to go side to side i need it to scroll up and down.

i have a javascript element that is display as block, what im trying to do is load some videos in the box with a scroll bar. but i cannot get the scroll bar to show up.

i tried overflow:scroll overflow:auto in css. i tried wrapping the videos with a div with overflow style

i tried ripping out the content of the vids and putting that in a sep file and then using iframe to load it.

I also tried changing the display to table other than block and even set it to none

still nothing..

i do know that stepcarousel and CMotion Image Gallery at least function with their div wrap so im not sure why my div wrap is not working.

but is there anything like CMotion Gallery or Stepcarousel that will force the div BUT scroll up and down.

or better yet whats the best way to force a scroll div in a block..

this does not work..

Code:

<div style="overflow:scroll; height:300px;">

my video content

</div>

i never knew it could be so hard to do the easiest thing, i have made scrollers before not sure why this one is not working.

I am looking to create a photo gallery.

I want to have a set of 25 thumbnails on the left of the page.

When the user clicks on a thumbnail, the larger image will appear on the right of the page.



I do not want to use the full size photos as thumbnails, because with 25 it will take too long to load.

Also, I have eight pages of 25 thumbnails and I would like the user to be able to go to the next page without actually loading another page.
Something along the lines of loading all 263 thumbnails on the initial page load, but hiding all but one set of 25 at a time.

I looked over at Dynamic Drive, but the only gallery script they have is a PHP-based one that has more features than I need and doesn't quite do what I want anyway.

Can you point me in the direction of a gallery script that will do what I need?

This one is very close, but not quite what I need. (It uses the full size image as the thumbnail.)

Thanks!

I know I posted this in the Javascript section, and if this is not right, I am sorry, please let me know so I can post it in the right area.

I am looking to create an image gallery on my website.

i am decent at coding, but need some help.
I am looking for a code to where I can have a gallery to every picture inside the folder. say I have 100 pictures in a folder named "pics123" on my server. Is there a way to code a gallery to where every picture in the folder will appear in the gallery without putting every image in the coding?

thanks!

I'm making my first venture into Javascript with this project.

i've been successful so far, but i'm trying to add a few more elements and i'm not sure how to do it.

here's the test site:

http://www.ductaman.com/test1/amenities.html

there's a few ways i want to go from here, one is to add captions to each picture when it's made large.
the other is to maybe have the thumb link to another photo, that way i can make the thumb be a face, and have the large pic be their whole body. etc.

i was hoping i could do this by adding more variables to the "a_load()" function. So i guess i was wondering if i can draw on a variable defined by "a_load()" with "b_load()" and if so, how? i have made several educated guesses as to how i would do this, but nothing has worked.
thanks -Andy

head code:
Code:

	<script type="text/javascript">
		function a_load(a_pic1,a_file1,a_pic2,a_file2,a_pic3,a_file3,a_pic4,a_file4,a_pic5,a_file5,a_pic6,a_file6)
			{
				document.getElementById(a_pic1).src = a_file1;
				document.getElementById(a_pic2).src = a_file2;
				document.getElementById(a_pic3).src = a_file3;
				document.getElementById(a_pic4).src = a_file4;
				document.getElementById(a_pic5).src = a_file5;
				document.getElementById(a_pic6).src = a_file6;
			}
		function b_load(whichpic)
			{
				var x=document.getElementById(whichpic);
				document.getElementById("largepic").src = x.src;
			}
	</script>

body code:
Code:

		<div id="map">
			<img src="images/default/chevy.png" id="chevy" onclick="a_load('pic1','images/default/lion.jpg','pic2','images/default/chimp.jpg','pic3','images/default/zebra.jpg','pic4','images/default/fish.jpg','pic5','images/default/cat.jpg','pic6','images/default/dog.jpg')">
			<img src="images/default/ford.png" id="ford" onclick="a_load('pic1','images/default/cow.jpg','pic2','images/default/duck.jpg','pic3','images/default/fish.jpg','pic4','images/default/frog.jpg','pic5','images/default/eagle.jpg','pic6','images/default/cat.jpg')">
			<img src="images/default/honda.png" id="honda" onclick="a_load('pic1','images/default/chimp.jpg','pic2','images/default/zebra.jpg','pic3','images/default/cat.jpg','pic4','images/default/lion.jpg','pic5','images/default/frog.jpg','pic6','images/default/duck.jpg')">
			<img src="images/default/toyota.png" id="toyota" onclick="a_load('pic1','images/default/dog.jpg','pic2','images/default/fish.jpg','pic3','images/default/cat.jpg','pic4','images/default/eagle.jpg','pic5','images/default/zebra.jpg','pic6','images/default/lion.jpg')">
			<img src="images/default/nissan.png" id="nissan" onclick="a_load('pic1','images/default/frog.jpg','pic2','images/default/lion.jpg','pic3','images/default/fish.jpg','pic4','images/default/dog.jpg','pic5','images/default/chimp.jpg','pic6','images/default/zebra.jpg')">
		</div>
		<div id="gallery">
			<img src="images/default/cat.jpg" id="pic1" height="150" width="200" onclick="b_load('pic1')">
			<img src="images/default/dog.jpg" id="pic2" height="150" width="200" onclick="b_load('pic2')">
			<img src="images/default/duck.jpg" id="pic3" height="150" width="200" onclick="b_load('pic3')">
			<img src="images/default/chimp.jpg" id="pic4" height="150" width="200" onclick="b_load('pic4')">
			<img src="images/default/eagle.jpg" id="pic5" height="150" width="200" onclick="b_load('pic5')">
			<img src="images/default/frog.jpg" id="pic6" height="150" width="200" onclick="b_load('pic6')">
			<div id="mainpic">
				<img src="images/default/cat.jpg" id="largepic" height="300" width="400">
			</div>
		</div>
	</div>

Hello guys,

I spent a lot of time searching for a good image/video gallery, but didn't find, what I'm looking for.

All I need is a code, that I can insert to my webpage. I need a thumbnail gallery (images or videos), that I can scroll by next/previous buttons a open it by clicking in new window. This is how LightBox and VideoLightBox work, but they don't have the next/previous buttons. I found js ImageScroller, but it can't work together with VideoLightBox...

Is there anybody solving this problem? Well I found this page
http://codecanyon.net/item/jquery-ho...preview/112734
but I need it even for videos. If there is a solution for both images and videos...

Thanks for help, DveD

I'm designing my site at the moment and want to include some photos (500 x 331 pixs). I want to have the images load within the same space without the page reloading like flickr.

I think it's done using AJAX Javascript or something similar but have been unable to find any tutorials which deal specifically with this although I'm sure there are many (links would be greatfully received). I want to be able to navigate through them with arrows, or a row of numbers or something simlar and straight forward.

simlar to these:
http://www.itsnicethat.com/articles/3011-things
http://www.timgeorgedesign.co.uk/jump_print.html (this is flash I think)

I'm using Dreamweaver, and have been working mainly in the design and split views so don't know too much about coding, but I was hoping to find prehaps a few lines of script that I might be able to paste in and edit to make this, as the rest of the page is all done or a decent pre made gallery plug-in.

Thanks for any help.

Not sure where to even start here.

I am trying to build a a small JavaScript image gallery. As you can see in the jpeg image at the link provided, i want the user to be able to change the large image by clicking on the small thumbnails. The thumbnails will also have a roll over where they enlarge slightly. Complicated?

I'm not a javascript expert, but i know enough by editing existing code and have saved a bunch of code i've modified. I've googled for javascript image galleries and looked through them but no success...

I can understand the clicking on a thumbnail to change the larger image but what gets me is having the thumbnail on top of the larger..as well having a still image at the top left....some sorta layering?

anyway some sorta help to get me started would be very helpful...

http://www.rossow-web.com/test/RCC_Mockup.jpg

thanks!