JavaScript - Image Gallery Javascript Change

i'm trying to get this effect
http://css-tricks.com/3458-perfect-f...kground-image/
except, instead of using an image, i would like to use a javascript image gallery. I was playing around with smoothgallery2.0 but I don't really care which I use as long as I'm just displaying images (no text) and there is a smooth fade effect (since the images are pretty high res). thanks so much in advance!

Hi,

I'm attempting to add the following functionality to my site.

Essentially, two images are displayed with a link "View More".

The user clicks "View More" and the two images are replaced by two new images. This can be repeated as required.

It's a basic form of slideshow I guess, but after some googling all the tutorials etc available seem to be more aimed at fully blown shows, whereas I believe my problem is much more simple.

The images are contained in a directory and are numbered like so: img1.jpg, img2.jpg. img3.jpg and so on.

the code I came up with so far is

PHP Code:
<script type="text/javascript" language="JavaScript">
start = '<img src="gallery/img';
end = '.jpg" width="150" height="200" />';

function getImage() {
var n = Math.ceil(Math.random() * 10); // i have 10 images
var FirstImg=(start+n+end);

var n = Math.ceil(Math.random() * 10); 
var SecondImg=(start+n+1+end);

}


/* so now I think I have two variables:
FirstImg = <img src="gallery/img1.jpg" width="150" height="200" />
SecondImg = <img src="gallery/img4.jpg" width="150" height="200" />

but i'm now unsure how i'd go about displaying this on the page. ideally the HTML generated would be:

<div class="pics">
<p><FirstImg></p>
<p><SecondImg></p>
<a href="#" onClick="return getImage()">View More</a>
</div>
*/
</script> 


Am I on the right lines here or am I way off?? Appreciate some pointers.

thanks a lot.

Hi,

I'm fairly new to javascript, I created a javascript image gallery using a tutorial found on web monkey.

Please see below:

Code:

<script language="JavaScript" type="text/javascript">
<!-- 
var interval = 1500; 
var random_display = 0;
var image_dir = "images/exhibition/"
var ImageNum = 0;
imageArray = new Array();
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-sealskinz.png");
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-orchard.png");
var number_of_image = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
ImageNum = randNum(0, number_of_image-1);
}
else {
ImageNum = (ImageNum+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}

function getPrevImage() {
ImageNum = (ImageNum-1) % number_of_image;
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

//   -->
</script>

However unfortunately there are two issues, one is IE6 is coming up with javascript errors and IE7 gets an error when you click the previous button on the first image.

The buttons look like this:

Code:

<div id="left-arrow-container"><a href="#" onClick="prevImage('rImage'); clearTimeout(timerID)"><img src="images/left-arrow.png" alt="left arrow" name="leftarrow" width="58" height="37" border="0" id="leftarrow" /></a></div>        
        <div id="see-the-whole-project"> see the whole project</div>
        <div id="right-arrow-container"><a href="#" onClick="rotateImage('rImage'); clearTimeout(timerID)"><img src="images/right-arrow.png" alt="right arrow" name="rightarrow" width="58" height="36" border="0" id="rightarrow" /></a></div>

Being new to javascript I don't know how to get round these issues so if anyone could advise me I would really appreciate it.

Thanks
Gary

I need a JavaScript image changer like this:
When you mouse over photo1.jpg, it will change to photo2.jpg.
When you mouse over photo2.jpg it will change to photo 3.jpg and so on untill photo5.jpg.
Please keep this in JavaScript form :)

I am creating a photography website and am almost there with coding a very simple image viewer with clickable thumbnails etc.

I have used the following script to change the images;

Code:

<script>
function changeImage(filename)
{
   document.mainimage.src = filename;
}
</script>

the main image is like this;
Code:

<img name="mainimage" src="../Images/wedding-photo-01-bride-getting-ready.JPG" title="bride getting ready"/>

And the links/images are like this.....

Code:

<a href="javascript:changeImage('../Images/wedding-photo-01-bride-getting-ready.JPG')">
                <img class="thumbbox" id="mainimage" src="../Images/wedding-photo-01-bride-get-thumb.JPG" alt="wellis photography logo" title="bride getting ready">
</a>

This works fine, but I would also like a caption underneath the main image that changes at the same time. Is there a way to do this simply? Perhaps using some variation of the following script?

Code:

<script type="text/javascript">
document.write(document.getElementById('myimage').title);
</script>

Also, one other thing - is it possible to add a 'fade' transition to my 'changeimage' function?


Thanks in advance

Hello, my name is Paula an I am making a website where I have an image changing on my homepage each time it is reloaded.

I found a code that lets me do this.
This is the script:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = '1.gif'
theImages[1] = '2.gif'
theImages[2] = '3.gif'
theImages[3] = '4.gif'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
</script>
</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
// End -->
</script>

It worked fine, with four images.
The thing is I wanted to put up to 16 in it.
So I tried ad up to 16 numbers with images but as soon as I put more than four, it would not work.

Finally what I did was to copy four times the same numbers and then it worked (0-3 , four times)...
so then I had many images shown randomly but the problem now is that the random is very uneven among the images.
Meaning, I get variation among very few, and many time repeating one.

This is what my script looks like now:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Alacenaconcajadegalletes-pgWShadow3.jpg'
theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltarinGasStation-pgSH.jpg'
theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltaroftheDeadwithEmbroideredTablecloth-pgSH.jpg'
theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Altarsobreparedverde-pgSH.jpg'
theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/BricksandClotheslineSH-pg.jpg'
theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg'
theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LatadeTecateconenchufes-pgSH.jpg'
theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg'
theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Mesaamarilla-pgSH-pg.jpg'
theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/MosaicwithPhotographofVictorianInterior-pgSH.jpg'
theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Paredrojaconjualas-pg.jpg'
theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/red_cupboardSH.jpg'
theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/RoomwithLandscapeofBurgundy-pgSH.jpg'
theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg'
theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/YellowandRedPorch-wcSH.jpg'
theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

// End -->
</script>

So my question is:
How can I manage with this script to have all my images showing up equally when they change in refresh?

I don not mind if they are not random, I also tried to remove the random property but could not manage either.

Any ideas?
Thank you so much, I really appreciate your help.
Paula

Basically, i have an image that i want it to be resized when i maximize and change browser size, so it is always centered. I have to use only javascript. I tried many window.resize functions but nothing works. Lets say the image is called 0000.jpg. Anyone has any ideas how to make this?

Thank you in advance.

Hi guys,

I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category.

So lets say I have a menu that looks like this:

Code:

<img src="notactiveimagemenu1.jpg" alt="">
<ul id="menu1">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>
<img src="notactiveimagemenu2.jpg" alt="">
<ul id="menu2">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>

Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active.

I was hoping to do this with some javascript.
Code:

// i was thinking about something like this:

// first put menu items in a array

// then use document.getElementById(id).onmouseover = function()
// and make some sort of check to see which src should be changed.

Now I really have no clue how to do it.
So if anyone knows a cool solution please let me know.
I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution.
And I think I should be able to use document.getElementById(id).onmouseover = function() for that.

Anyway thanks for any tips.
Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript.

Hi guys,

It's my first time to code in javascript... so I need a little help in changing the image captions in a gallery.

Please find the files in the zip attached..

No effects needed for the caption change really... I don't want the captions to slide in like the images, I just want them to change when the images slide.

Hope you guys can help me.. I've been at it for weeks, lol. Sorry a real noob here.

Hello.

The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text.

Here is the code.

Code:

<html>
<head>
<style type='text/css'>

#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>

<script type='text/javascript'>
function div_bg(team){
	document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";	
}
</script>

</head>

<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>

Thanks in advance!!

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