Problems using javascript to display images in a very basic photo portfolio

mchaplin897 · 07-15-2012, 03:23 AM

Hi there,

I'm trying to use javascript to create a very basic photo portfolio. No fancy light boxes or effects, just thumbnails and a "next" and "prev" button to navigate them. Right now I'm just working with four images until I figure this out. I want it to just do a basic rotation of the images, where the first page loads one image and then clicking "next" swaps it out for the next image and so on and so forth. Clicking "prev" would load the previous image.

I stole the below code from a friend of mine who did something similar but it isn't working for me and I can figure out why. The first image will appear properly, but then clicking "next" displays nothing, until the fourth click where it reloads the original image. I wan't it to load the next image every time I click "next". I think somehow the other images are being prevented from displaying but I'm not sure how. Any ideas would be very much appreciated, I've been staring at this for days now and can't figure it out.

Here is my code

In the header
-----------------

Code:

<script>  
var currentId ="img1";
$(document).ready(function(){
   		$(document).ready(function(){
   			
   			$("a#prev_link").click(function(e){
   				var previousId = $("#" + currentId).attr("prev");
   				$("#" + currentId).hide();
   				$("#" + previousId).show();
   				currentId = previousId;
   				e.preventDefault();
   			});
   			
   			$("a#next_link").click(function(e){
   				var nextId=$("#" + currentId).attr("next");
   				$("#" + currentId).hide();
   				$("#" + nextId).show();
   				currentId = nextId;
   				e.preventDefault();
   			});
   			
   		});
});
</script>

In the body
-----------------

Code:

<div id="photo_body">
	<ul id="image_navigation">
	<li class="image_navigation"><a id="prev_link" href="#">prev</a></li>
	<li class="image_navigation"><a id="main" href="main"> index </a></li>
	<li class="image_navigation"><a id="next_link" href="#">next</a></li>
        </ul>

		<div id="img1" next="img2" prev="img4" style="display: block"><img class="portfolio" src="images/bradlees.jpg"> 
		<div id="img2" next="img3" prev="img1" style="display: none"><img class="portfolio" src="images/blue_white_building.jpg"/></div>
		<div id="img3" next="img4" prev="img2" style="display: none"><img class="portfolio" src="images/perkins.jpg"/></div>
		<div id="img4" next="img1" prev="img3" style="display: none"><img class="portfolio" src="images/pizza_hut.jpg"/></div>

</div>

DrDOS · 07-15-2012, 04:18 AM

There is a really neat way to do album rotation which you rarely see used. It uses the mousewheel to change the images. The mousewheel goes back to Windows 98 so the code is very dependable.

Code:

    <!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<script type="text/javascript">
//Alerts to errors.
window.onerror=function(msg, url, linenumber){var logerror='Error message: ' + msg + '. Url: ' + url + 'Line Number: ' + linenumber;alert(logerror);return false}
</script>
    <title>!</title>
<style type="text/css">

</style>
<script type="text/javascript"></script>
</head>
<body>


<img id="slideshow" src="marco-von-mojave-1.jpg" />
<br>
<span id="name" ></span>
 
<script type="text/javascript">

//alert(window.screen.width+" X "+window.screen.height);
//alert(window.screen.height/window.screen.width);
 
var myimages=[
"marco-von-mojave-1.jpg",
"marco-von-mojave-2.jpg",
"marco-von-mojave-3.jpg",
"marco-von-mojave-4.jpg",
"marco-von-mojave-5.jpg",
"marco-von-mojave-6.jpg",
"marco-von-mojave-7.jpg",
"marco-von-mojave-8.jpg"
]
var i = 0;

var slideshow=document.getElementById("slideshow")
var info=document.getElementById("name")
info.innerHTML=myimages[0];
function rotateimage(e){
    var evt=window.event || e //equalize event object
    var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
	if ( delta < 0 ) del = 1;
	else if ( delta > 0 ) del = -1;
	else del = 0;
	var l = myimages.length
	i = (i+del+l)%l ;
     
    if (evt.preventDefault) //disable default wheel action of scrolling page
        evt.preventDefault()
    else return false
	showimage(i);
	}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
if (slideshow.attachEvent) //if IE (and Opera depending on user setting)
    slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener) //WC3 browsers
    slideshow.addEventListener(mousewheelevt, rotateimage, false)
function showimage(X)
{
slideshow.src=myimages[X];
info.innerHTML=myimages[X]
}
 
</script>

</body>
</html>