...

View Full Version : Help making a simple image gallery



cottonrhetoric
06-30-2011, 05:36 PM
Okay, I've already learned from google how to make the following two simple image galleries:

This one displays a specific image when its link is clicked ((URL address blocked: See forum rules)/tests/gallerysimp.html)

And this one displays the previous/next image for whatever's showing ((URL address blocked: See forum rules)/tests/prevnext.html). (During its code, it points to this .js file ((URL address blocked: See forum rules)/tests/nextPrevious.js).)

My question is, how do I combine those two galleries? How can I make one gallery that contains both kinds of links? Since the two galleries were copied from different places, the names they use aren't the same, and I'm not sure what to change to make it all unified. (I tried fiddling with it for over an hour before giving up.)

Let me know if you need any more info from me.

jmrker
06-30-2011, 06:23 PM
My mind reading skill suck! :eek:
Where are the links to the code? :confused:

cottonrhetoric
06-30-2011, 09:52 PM
I tried linking to them in the original post but the site blocked me. Okay, I'll copy-paste everything.

Here's the first gallery, which uses next/previous clicks (it's tested and works fine by itself):

================
<head>

<script type="text/javascript">

// List image names without extension
var objId= new Array(3)
objId[0] = "asdfa";
objId[1] = "asdfb";
objId[2] = "asdfc";
objId[3] = "asdfd";
objId[4] = "asdfe";

// Tell browser where to find the image
objIdSrc = (((the url, which i can't paste here)))";

// Tell browser the type of file
objIdEnd = ".jpg"

var i = 0;

// Create function to load image
function loadImg(){
document.imgSrc.src = objIdSrc + objId[i] + objIdEnd;
}

// Create link function to switch image backward
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = objIdSrc + objId[l] + objIdEnd;
}

// Create link function to switch image forward
function next(){
if(i>2){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = objIdSrc + objId[l] + objIdEnd;
}

// Load function after page loads
window.onload=loadImg;

</script>
</head>
<body>

<img name="imgSrc" id="imgSrc">

<a href="#" onClick="prev();">older</a> &nbsp; <a href="#" onClick="next();">newer</a>

</body>
</html>

===============

and here's the second gallery, which uses individual image links (it's also tested and works fine by itself):

===============

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Change Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">

function changeIt(objName)
{

//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
var obj = document.getElementById(objName);

//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = new Array();

//Storing the image IDs into the array starts here

objId[0] = "asdfa";
objId[1] = "asdfb";
objId[2] = "asdfc";
objId[3] = "asdfd";
objId[4] = "asdfe";

//Storing the image IDs into the array ends here

// Tell browser where to find the image
objIDSrc = "(((the url)))";

// Tell browser the type of file
objIDEnd = ".jpg"

//A counter variable going to use for iteration
var i;

//A variable that can hold all the other object references other than the object which is going to be visible
var tempObj;

//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for(i=0;i<objId.length;i++)
{
if(objName == objId[i])
{
obj.style.display = "block";
}
else
{
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}

</script>
</head>



<body>
<div id="asdfa">
<img src="asdfa.jpg" border="0" alt="one" />
</div>

<div id="asdfb" style="display:none">
<img src="asdfb.jpg" border="0" alt="two" />
</div>

<div id="asdfc" style="display:none">
<img src="asdfc.jpg" border="0" alt="three" />
</div>

<div id="asdfd" style="display:none">
<img src="asdfd.jpg" border="0" alt="four" />
</div>

<div id="asdfe" style="display:none">
<img src="asdfe.jpg" border="0" alt="five" />
</div>
<br><br>
<a id="one" href="#" onclick="changeIt('asdfa');">one</a>
<a id="two" href="#" onclick="changeIt('asdfb');">two</a>
<a id="three" href="#" onclick="changeIt('asdfc');">three</a>
<a id="four" href="#" onclick="changeIt('asdfd');">four</a>
<a id="five" href="#" onclick="changeIt('asdfe');">five</a>
<br><br>
<img name="imgSrc" id="imgSrc">

</body>
</html>

==============

So, all I need to do is combine them into one gallery that uses both types of navigation, but whatever I've tried hasn't worked.

jmrker
06-30-2011, 10:10 PM
This is my attempt to modify a script from: http://www.codingforums.com/showthread.php?t=228509
I've got most of it working except for the actual link logic. :o
It works with the alert, but not with my attempts (yet!).

Perhaps 'bullant' or 'vwphillips' will see this post and give you some additional help
since they were the main contributors on the posted thread above.
I don't know how to give a 'shout out' to a particular forum member.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- From: http://www.codingforums.com/showthread.php?t=228509 -->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Carousel Links</title>
<style type="text/css">
#banner {
display: none;
position: relative;
border: 3px solid black;
overflow: hidden;
}
#imgContainer {
position: absolute;
top: 0px;
left: 0px;
}
#imgContainer img{
margin: 0px 10px 10px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}
</style>
<script type="text/javascript">
var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
var picPaths = [
'11.jpg','12.jpg','13.jpg','14.jpg','15.jpg' // , // can be expanded with more images
/*
'21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
'31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
'41.jpg','42.jpg','43.jpg','44.jpg','45.jpg',
'51.jpg','52.jpg','53.jpg','54.jpg','55.jpg' // Note: NO comma after last entry
*/
];
var picLinks = [
'http://www.nova.edu','http://optometry.nova.edu',
'http://www.webdeveloper.com','http://www.codingforums.com',
'http://www.dreamincode.net' // Note: NO comma after last entry
];

var step = 5; //pixels
var speed = 150; //milliseconds
var slidePause = 1; //milliseconds
var curPos = 0;
var timer;
var picMultiple = 4;

function slideImages(){
curPos -= step;
if(curPos < -picWidth){ //finished moving left 1 image
clearTimeout(timer);
reOrderImgs();
imgContainerO.style.left = curPos +'px';
} else { //continue sliding left
imgContainerO.style.left = curPos +'px';
timer = setTimeout(slideImages,speed);
}
}
function reOrderImgs(){
var childElems = imgContainerO.childNodes; //first child is a text node
for(i=0; i < childElems.length; i++){
if(childElems[i].nodeName.toLowerCase() == 'img'){
var firstImgO = childElems[i];
i = childElems.length;
}
}
imgContainerO.appendChild(imgContainerO.removeChild(firstImgO));
curPos = 0;
setTimeout(slideImages,slidePause);
}
window.onload=function(){
preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
//preload the images
picsO = new Array();
for(i=0; i < preloadedImgs.length; i++){
picsO[i] = new Image();
picsO[i].src = preloadedImgs[i].src;
}
picWidth = picsO[0].width;
picHeight = picsO[0].height;
bannerO = document.getElementById('banner');
imgContainerO = document.getElementById('imgContainer');
imgContainerO.style.width = picWidth*picsO.length*picMultiple+'px';
for(i=0; i < picsO.length; i++){
var newImg = document.createElement('img');
newImg.id = 'img_'+(i+1);
newImg.setAttribute('src',picsO[i].src);

newImg.setAttribute('title',picsO[i].src);
// newImg.setAttribute('value',picsO[i].src); // does not appear to be a value for <img> tag
newImg.onclick= eventHandler.prototype.ShowAlert;

imgContainerO.appendChild(newImg);
}
bannerO.style.height = picHeight+'px';
bannerO.style.width = picsO[0].width*picMultiple+'px';
bannerO.style.display = 'block';
document.body.removeChild(document.getElementById('preloadedPics'));
setTimeout(slideImages,500);
}

// Following from: http://forums.devx.com/archive/index.php/t-100007.html
function eventHandler() {
// prototype instance
}

eventHandler.prototype.ShowAlert = function() {
alert('Not quite right with the LINK yet!');
}

</script>

</head>
<body>
<!-- preload the images so we can use their actual width and height property
to scale the thumbnails -->
<div id="preloadedPics" style="display: none"></div>
<script type="text/javascript">
for(i=0; i < picPaths.length; i++){
var newImg = document.createElement('img');
newImg.src = baseURL+picPaths[i];
document.getElementById('preloadedPics').appendChild(newImg);
}
</script>

<!-- --------------------End of image preloads ------------------ -->
<div id="banner">
<div id="imgContainer" title=""></div>
</div>

</body>
</html>

jmrker
06-30-2011, 10:28 PM
Modified some more and now it seems to work as I want.
Question is, does it work the way you want?

You will need to change the 'baseURL', 'picPaths' and 'picLinks' arrays to match your images and links.
They need to match in count or you will get errors.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- From: http://www.codingforums.com/showthread.php?t=228509 -->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Carousel Links</title>
<style type="text/css">
#banner {
display: none;
position: relative;
border: 3px solid black;
overflow: hidden;
}
#imgContainer {
position: absolute;
top: 0px;
left: 0px;
}
#imgContainer img{
margin: 0px 10px 10px 0px;
padding: 0px 0px 0px 0px;
display: inline;
border:1px solid blue;
}
</style>
<script type="text/javascript">
var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
var picPaths = [
'11.jpg','12.jpg','13.jpg','14.jpg','15.jpg' // ,
/*
'21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
'31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
'41.jpg','42.jpg','43.jpg','44.jpg','45.jpg',
'51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'
*/
];
var picLinks = [
'http://www.nova.edu','http://optometry.nova.edu',
'http://www.webdeveloper.com','http://www.codingforums.com',
'http://www.dreamincode.net'
];

var step = 5; //pixels
var speed = 150; //milliseconds
var slidePause = 1; //milliseconds
var curPos = 0;
var timer;
var picMultiple = 4;

function slideImages(){
curPos -= step;
if(curPos < -picWidth){ //finished moving left 1 image
clearTimeout(timer);
reOrderImgs();
imgContainerO.style.left = curPos +'px';
} else { //continue sliding left
imgContainerO.style.left = curPos +'px';
timer = setTimeout(slideImages,speed);
}
}
function reOrderImgs(){
var childElems = imgContainerO.childNodes; //first child is a text node
for(i=0; i < childElems.length; i++){
if(childElems[i].nodeName.toLowerCase() == 'img'){
var firstImgO = childElems[i];
i = childElems.length;
}
}
imgContainerO.appendChild(imgContainerO.removeChild(firstImgO));
curPos = 0;
setTimeout(slideImages,slidePause);
}
window.onload=function(){
preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
//preload the images
picsO = new Array();
for(i=0; i < preloadedImgs.length; i++){
picsO[i] = new Image();
picsO[i].src = preloadedImgs[i].src;
}
picWidth = picsO[0].width;
picHeight = picsO[0].height;
bannerO = document.getElementById('banner');
imgContainerO = document.getElementById('imgContainer');
imgContainerO.style.width = picWidth*picsO.length*picMultiple+'px';
for(i=0; i < picsO.length; i++){
var newImg = document.createElement('img');
newImg.id = 'img_'+(i+1);
newImg.setAttribute('src',picsO[i].src);

newImg.setAttribute('title',picLinks[i]);
newImg.onclick= eventHandler.prototype.ShowAlert;

imgContainerO.appendChild(newImg);
}
bannerO.style.height = picHeight+'px';
bannerO.style.width = picsO[0].width*picMultiple+'px';
bannerO.style.display = 'block';
document.body.removeChild(document.getElementById('preloadedPics'));
setTimeout(slideImages,500);
}

// Following from: http://forums.devx.com/archive/index.php/t-100007.html
function eventHandler() {
// prototype instance
}

eventHandler.prototype.ShowAlert = function() {
// alert('Not quite right with the LINK yet!');
alert(this.title);
document.location = this.title;
}

</script>

</head>
<body>
<!-- preload the images so we can use their actual width and height property
to scale the thumbnails -->
<div id="preloadedPics" style="display: none"></div>
<script type="text/javascript">
for(i=0; i < picPaths.length; i++){
var newImg = document.createElement('img');
newImg.src = baseURL+picPaths[i];
document.getElementById('preloadedPics').appendChild(newImg);
}
</script>

<!-- --------------------End of image preloads ------------------ -->
<div id="banner">
<div id="imgContainer" title=""></div>
</div>

</body>
</html>


Good Luck!
:)

cottonrhetoric
07-01-2011, 01:13 AM
That's an impressive bit of code.

It doesn't really seem related to what I was asking for though? The codes I showed have one picture showing, and then the picture changes when you click on either a "next" button or a link with the name of a picture. I'm just looking to make a gallery that does both at once.

jmrker
07-01-2011, 01:46 AM
That's an impressive bit of code.

It doesn't really seem related to what I was asking for though? The codes I showed have one picture showing, and then the picture changes when you click on either a "next" button or a link with the name of a picture. I'm just looking to make a gallery that does both at once.

Well, I guess I'll have to refer back to post #2
as I have completely miss-understood what your request is.

Do you have a live link to look at what your attempt is
rather than the snippets you posted that you said you
cannot get to works together?

cottonrhetoric
07-01-2011, 02:19 AM
Well, I guess I'll have to refer back to post #2
as I have completely miss-understood what your request is.

Do you have a live link to look at what your attempt is
rather than the snippets you posted that you said you
cannot get to works together?

lol yes but the forum won't let me post any links. i will try to pm them to you (if you dont get a pm within 5 minutes, assume it didnt let me)

jmrker
07-01-2011, 02:46 AM
Another attempt at telepathy ...


<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>

<script type="text/javascript">

var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
var picFiles = [
'11.jpg','12.jpg','13.jpg','14.jpg','15.jpg']; // can be expanded with more images

var imgPtr = 0;

// Create function to load image
function loadImg(ptr){
document.getElementById('imgSrc').src = baseURL+picFiles[ptr];
}

// Create link function to switch image backward
function prev() {
if (imgPtr < 1) { imgPtr = 0; } else { imgPtr--; }
loadImg(imgPtr);
}

// Create link function to switch image forward
function next(){
if (imgPtr >= (picFiles.length-1)) { imgPtr = picFiles.length-1; } else { imgPtr++; }
loadImg(imgPtr);
}

// Load function after page loads
onload = function() { loadImg(0); }

</script>
</head>
<body>

<a id="one" href="javascript:void(0)" onclick="loadImg(0)">one</a>
<a id="two" href="javascript:void(0)" onclick="loadImg(1)">two</a>
<a id="three" href="javascript:void(0)" onclick="loadImg(2)">three</a>
<a id="four" href="javascript:void(0)" onclick="loadImg(3)">four</a>
<a id="five" href="javascript:void(0)" onclick="loadImg(4)">five</a>
<p>

<img name="imgSrc" id="imgSrc">

<p>
<a href="javascript:void(0)" onClick="prev();">older</a>
&nbsp;
<a href="javascript:void(0)" onClick="next();">newer</a>

</body>
</html>

I don't see how either of your original scripts worked, but this does.

Good Luck!
:)

cottonrhetoric
07-01-2011, 03:16 AM
AAAAAHHHHHHH THANK YOU!!!!!!!!!! It works PERFECTLY
I was honestly ready to give up.

cottonrhetoric
07-01-2011, 03:18 AM
PS does that mean you didnt get my pm? Because I really did send one! With links and everything

jmrker
07-01-2011, 03:24 AM
AAAAAHHHHHHH THANK YOU!!!!!!!!!! It works PERFECTLY
I was honestly ready to give up.

You're most welcome
Happy to help, when I can understand the problem :rolleyes:
Good Luck! :D


PS does that mean you didnt get my pm? Because I really did send one! With links and everything

No, it means that I did not notice any PM until you just mentioned it. :o



Note, just FYI, I used the same code for another thread but used radio buttons rather than links
See: http://www.codingforums.com/showthread.php?t=230866

jmrker
07-01-2011, 05:27 PM
Here is a minor change to keep the link changes in-sync with the next/prev function changes.


function loadImg(ptr){
document.getElementById('imgSrc').src = baseURL+picFiles[ptr];
imgPtr = ptr;
}

:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum