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 8 of 8

Thread: Photo gallery

  1. #1
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts

    Photo gallery

    Does anyone have any idea where i can find a place to get a gallery like the one on this site?

    http://www.customcandyco.com/

    Thanks,
    Josh

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,685
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello j05hr,
    It looks like they are using a mixture of js and lightbox for that.
    The scrolling thumbnails are done with http://jscroller2.markusbordihn.de/ and the pop up effect is from lightbox.

    For further help you will probably need to dismantle their code to see how it's done.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    A few...

    Free Photo Galleries:

    Coppermine Photo Gallery: http://coppermine-gallery.net/
    Gallery: http://gallery.menalto.com/
    Full Screen Image Gallery (It automatically scales the image with kept aspect ratio to fill the browser background, with a flickr search engine, thumbnails, captions, preloader and some other goodies): http://devkick.com/blog/full-screen-...ry-and-flickr/
    12 Javascript Image Galleries: http://tutorialblog.org/12-javascript-image-galleries/
    JavaScript Image Gallery and Slideshow: http://www.leigeber.com/2008/05/ajax...ery-slideshow/
    Galleria (JavaScript image gallery written in jQuery): http://devkick.com/lab/galleria/
    Photo Gallery Fast Creator 1.0.7.0 (Freeware): http://www.brothersoft.com/photo-gal...or-250901.html
    Free online photo gallery generator: http://www.creatingonline.com/webmas..._generator.htm

    PhotoJoy (Wallpaper Collages, 3D Screensavers, PhotoToy Widgets, Professional photos, easy to use):
    http://www.photojoy.com/photojoy_demo.aspx?id=11300
    Video Demo: http://www.photojoy.com/photojoy_demo.aspx?id=11299 (see video: http://www.youtube.com/watch?v=DLBuStr8OoY )

    VisualLightBox is a free wizard program that helps you easily generate online photo albums, lightbox gallery with a nice Lightbox-style overlay effect, in a few clicks without writing a single line of code: http://lightbox2.com/lightbox2-how.html

    Free Jalbum web album software: http://jalbum.net/
    Lightbox 2: http://www.huddletogether.com/projects/lightbox2/
    Shedding Some Light on Lightbox: http://www.webreference.com/programm...ript/Lightbox/
    Clean Photo Gallery Website Layout: http://psdvibe.com/2009/04/28/clean-...ebsite-layout/
    ☠ ☠RON☠ ☠

  • #4
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    Thanks for the list Major Payne, none seem to do what my client really wants it to do.

    Excavator - How do you go about getting their PHP files that they use in their JS?

    Thanks for the help,
    Josh

  • #5
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    This is what I've got now, using their images for now as an example, it all seems to be working except for the scrolling thumbnails

    http://www.bulletproofwebdesign.co.u...r/gallery.html

    This is my code

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    
    <title>Logo Lollipops for Gifts &amp; Marketing - Custom Candy Company</title>
    <meta name="description" content="Custom Candy Company takes your designs or color photographs, and makes Lollipops and English Rock Candy that make every occasion great. Whether it's a trip to the ballpark, theme park, tradeshow or even weddings and birthday parties, these candies make the day more memorable." />
    <meta name="keywords" content="logo lollipops, unique gift item, unique marketing, team marketing, seasonal treat, promotional lollipop" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" language="javascript" src="js/main.js"></script>
    <script type="text/javascript" language="javascript" src="js/AjaxObject.js"></script>
    
    <script type="text/javascript" language="javascript" src="js/swfobject.js"></script>
    <script type="text/javascript" language="javascript" src="js/write_flash.js"></script>
    
    
    
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    
    <script language="javascript" type="text/javascript">
    <!--
    function submit_form(which) {
    which.form.submitted.value = 'yes';
    which.form.submit();
    }
    //-->
    </script>
    </head>
    <div class="div_gallery_panel"><!-- GALLERY PANEL DIV -->
    <div class="div_gallery_code"><!-- GALLERY CODE DIV -->
    <!-- ///// GALLERY CODE GOES HERE ///// -->
    
    <script type="text/javascript" language="javascript" src="modules/galleries/js/jscroller2-1.5.js"></script>
    <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/lightbox/js/prototype.js"></script>
    
    <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script>
    
    <style type="text/css">
    #scroller_container {
    	margin:2px 0 0 20px;
    	width: 410px;
    	height: 40px;
    	overflow: hidden;
    }
    /* CSS Hack Safari */
    #dummy {;# }
    
    #scroller_container {
    	overflow: auto;
    }
    
    </style>
    <div class="home-picture" id="galjsb_largeimg"><a href="images/a-071.jpg" rel="lightbox[gallery]"><img src="images/a-071.jpg" alt="" width="410" height="240" border="0" /></a></div>
    <div id="scroller_container">
    	<div class="jscroller2_left jscroller2_speed-20 jscroller2_mousemove jscroller2_ignoreleave" style="font-size:50px; white-space:nowrap; margin: 0;">
    				<img src="images/a-071.jpg" alt="" width="70" height="40" class="small-pictures" onclick="galjsb_clickthumb('a-071.jpg','')" style="cursor:pointer" />
    				<img src="images/Halloween.jpg" alt="" width="70" height="40" class="small-pictures" onclick="galjsb_clickthumb('Halloween.jpg','')" style="cursor:pointer" />
    			</div>
    </div>
    <script type="text/javascript">
    //<![CDATA[
    var galjsb_index = 0;
    var photos = new Array();
    photos[0] = "a-071.jpg";
    photos[1] = "Halloween.jpg";
    
    
    function galjsb_clickthumb(photo, caption) {
    	var img_link = 'images/';
    	var lb_link = 'images/';
    	document.getElementById('galjsb_largeimg').innerHTML = '<a href="'+lb_link + photo+'" rel="lightbox[gallery]" title="'+caption+'"><img src="'+img_link + photo+'" alt="" width="410" height="240" border="0" /></a>';
    }
    //]]>
    </script> 
    <!-- ///// GALLERY CODE GOES HERE ///// -->
    Which part of their site is it that does the scrolling thumnails and why isn't it working on mine?

    Regards,
    Josh

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by j05hr View Post
    Thanks for the list Major Payne, none seem to do what my client really wants it to do.

    Excavator - How do you go about getting their PHP files that they use in their JS?

    Thanks for the help,
    Josh
    Guess you didn't check them out as Lightbox2 does exactly that effect that you want. Also, you can use the free JAlbum software and the correct free skin to get that exact same effect. There are others using JQuery.
    ☠ ☠RON☠ ☠

  • #7
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    Thanks for your reply, do you know what the free skin is as I couldn't find it on the JAlbum site?

    Thanks,
    Josh

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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