Need help with JavaScript "Galleria" gallery coding

Report · Jan 12, 2011

I am trying to create a clickable gallery with the filmstrip either on the top or on left hand side for people to click to see my portfolio. I want the first photo to be auto loaded. I downloaded the javascript from;

http://galleria.aino.se/

I have the coding for;

galleria.js

galleria.classic.js

jquery.min.js

I try the basic tutorial given on the website http://galleria.aino.se/

but it seem more coding are needed.

I want the similar gallery as shown on the above website without the black void space on the side of the large photo. I do not want the Rewind and Fastforward buttons as shown on the side of the large photo (not on the thumbnail)

I have tried downloading few similer files and trying to use their html coding but there werent the full tutorial.

The coding below only shows two small photos left top of the page without the large photo either on top of them.

I dont understand much about coding. Only been doing this for like few months and still learning but i am stuck now. Much apperciated if you can help me out here with what code need to go where. Many thanks.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>

</div>

</body>
</html>

Report · Jan 13, 2011

Without studying all the code in detail, it's difficult to answer this question. However, there is a Galleria forum, where you might get help from someone who is already familiar with the code: http://getsatisfaction.com/galleria/problems/common.

Report · Jan 13, 2011

Thank you for getting back to. Your time is much apperciated.

After few days of trying to get it working, i have finally found some code that work. Now i am going to have to place these coding on my actual webpage with my own photos within a DIV tag. fingers cross it still work. If anyone had the same problem as me,..download the Galleria and jQuery files from here:

http://galleria.aino.se/

I have placed the files in a "test" folder. All you need is;

galleria.css

jquery.min.js

jquery.galleria.js

and the "img" folder, if you want to use their photos to test it out. The coding below work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Galleria Demo 2</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="imagetoolbar" content="false">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="test/galleria.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="test/jquery.min.js"></script>
    <script type="text/javascript" src="test/jquery.galleria.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){

        $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
        $('.nav').css('display','none'); // hides the nav initially

        $('ul.gallery_demo').galleria({
            history   : false, // deactivates the history object for bookmarking, back-button etc.
            clickNext : false, // helper for making the image clickable. Let's not have that in this example.
            insert    : undefined, // the containing selector for our main image.
                                   // If not found or undefined (like here), galleria will create a container
                                   // before the ul with the class .galleria_container (see CSS)
            onImage   : function() { $('.nav').css('display','block'); } // shows the nav when the image is showing
        });
    });

    </script>
    <style media="screen,projection" type="text/css">

    /* BEGIN DEMO STYLE */
    *{margin:0;padding:0}
    body{padding:20px;background:white;background:white;color:#555;font:80%/140% 'helvetica neue',sans-serif;width:900px;margin: 0 auto;}
    h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
    a{color:#348;text-decoration:none;outline:none;}
    a:hover{color:#67a;}
    .caption{color:#888;position:absolute;top:250px;left:3px;width:200px;}
    .demo{position:relative;margin-top:2em;}
    .gallery_demo{width:200px;float:left;}
    .gallery_demo li{width:55px;height:70px;border:3px double #eee;margin: 0 2px 2px 0;background:#eee;}
    .gallery_demo li.hover{border-color:#bbb;}
    .gallery_demo li.active{border-style:solid;border-color:#222;}
    .gallery_demo li div{left:240px}
    .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

    .galleria_container{margin:0 auto 60px auto;height:438px;width:700px;float:right;}

    .nav{padding-top:15px;clear:both;}

    .info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
    .info p{margin-top:1.6em;}

    .nav{position:absolute;top:410px;left:0;}

    </style>

</head>
<body>
<h1>Galleria Demo 02</h1>
<div class="demo">
<ul class="gallery_demo_unstyled">
    <li class="active"><img src="test/img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="test/img/stones.jpg" alt="Stones" title="Stones - from Aple images"></li>
    <li><img src="test/img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img class="noscale" src="test/img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="test/img/lightning.jpg" alt="Lightning" title="Black & White"></li>
    <li><img src="test/img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="test/img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="test/img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="test/img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p>
</div>

Report · Jan 13, 2011

Using the same files, i have found a different code where they place the tumbnails at the bottom of the slideshow rather than on the side. Here is the code;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Galleria Demo 1</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="imagetoolbar" content="false">
    <meta name="description" content="">
    <meta name="keywords" content="">


    <link href="test/galleria.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="test/jquery.min.js"></script>
    <script type="text/javascript" src="test/jquery.galleria.js"></script>


    <script type="text/javascript">

    $(document).ready(function(){

        $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability

        $('ul.gallery_demo').galleria({
            history   : true, // activates the history object for bookmarking, back-button etc.
            clickNext : true, // helper for making the image clickable
            insert    : '#main_image', // the containing selector for our main image
            onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

                // fade in the image & caption
                image.css('display','none').fadeIn(1000);
                caption.css('display','none').fadeIn(1000);

                // fetch the thumbnail container
                var _li = thumb.parents('li');

                // fade out inactive thumbnail
                _li.siblings().children('img.selected').fadeTo(500,0.3);

                // fade in active thumbnail
                thumb.fadeTo('fast',1).addClass('selected');

                // add a title for the clickable image
                image.attr('title','Next image >>');
            },
            onThumb : function(thumb) { // thumbnail effects goes here

                // fetch the thumbnail container
                var _li = thumb.parents('li');

                // if thumbnail is active, fade all the way.
                var _fadeTo = _li.is('.active') ? '1' : '0.3';

                // fade in the thumbnail when finnished loading
                thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

                // hover effects
                thumb.hover(
                    function() { thumb.fadeTo('fast',1); },
                    function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
                )
            }
        });
    });

    </script>
    <style media="screen,projection" type="text/css">

    /* BEGIN DEMO STYLE */
    *{margin:0;padding:0}
    body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
    h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
    a{color:#348;text-decoration:none;outline:none;}
    a:hover{color:#67a;}
    .caption{font-style:italic;color:#887;}
    .demo{position:relative;margin-top:2em;}
    .gallery_demo{width:702px;margin:0 auto;}
    .gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
    .gallery_demo li div{left:240px}
    .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

    #main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
    #main_image img{margin-bottom:10px;}

    .nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}

    .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
    .info p{margin-top:1.6em;}

    </style>

</head>
<body>
<h1>Galleria Demo 01</h1>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
    <li><img src="test/img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="test/img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
    <li class="active"><img src="test/img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img src="test/img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="test/img/lightning.jpg" alt="Lightning" title="Black & White"></li>
    <li><img src="test/img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="test/img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="test/img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="test/img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p>
</div>