How to get my Gallery to display an image when it opens

I've set up a jquery gallery on this page:

When it opens though there is not initial image displayed. How would I get it to display the first image in the list when the page first opens?

    <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="files/galleria.css" rel="stylesheet" type="text/css" media="screen"> 
	<script type="text/javascript" src="files/jquery.min.js"></script> 
	<script type="text/javascript" src="files/jquery.galleria.js"></script> 
	<script type="text/javascript"> 
		$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
		$('.nav').css('display','none'); // hides the nav initially
			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

	<style media="screen,projection" type="text/css"> 
	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;}
	.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 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;}
	.info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
	.info p{margin-top:1.6em;}
<h1>Galleria Demo 02</h1> 
<div class="demo"> 
<ul class="gallery_demo_unstyled"> 
    <li><img src="files/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li> 
    <li><img src="files/stones.jpg" alt="Stones" title="Stones - from Aple images"></li> 
    <li><img src="files/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li> 
    <li><img src="files/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li> 
    <li><img src="files/lightning.jpg" alt="Lightning" title="Black &amp; White"></li> 
    <li><img src="files/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li> 
    <li><img src="files/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li> 
    <li><img src="files/pier.jpg" alt="Pier" title="Proin erat nisi"></li> 
    <li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li> 
    <li><img src="files/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li> 
    <li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li> 
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$; return false;">next</a></p> 

Open in new window

Who is Participating?
elliottbenzleConnect With a Mentor Author Commented:
I figured it out. add class="active" to the <li> element.

Thanks for the help.
In the <body> onload callback,  you could start it going, something like this:

<body onload="$"> 

Open in new window

elliottbenzleAuthor Commented:
I tried but    onload="$"     didn't work. Any other ideas?
Gurvinder Pal SinghCommented:
this particular example is showing the default first image, please refer this
elliottbenzleAuthor Commented:
This is the correct solution. Thanks to the others who answered.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.