Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Location
    NYC
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,926
    Thanks
    15
    Thanked 229 Times in 229 Posts
    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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •