Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 278
  • Last Modified:

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

I've set up a jquery gallery on this page:
http://www.redsremodeling.com/gallery/gallery.htm

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?

Thanks
<!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="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"> 
	
	$(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:450px;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><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> 
</ul> 
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p> 
</div> 
</body> 
</html>

Open in new window

0
elliottbenzle
Asked:
elliottbenzle
  • 3
1 Solution
 
sjklein42Commented:
In the <body> onload callback,  you could start it going, something like this:

<body onload="$.galleria.next()"> 

Open in new window

0
 
elliottbenzleAuthor Commented:
I tried but    onload="$.galleria.next()"     didn't work. Any other ideas?
0
 
Gurvinder Pal SinghCommented:
this particular example is showing the default first image, please refer this
http://galleria.aino.se/media/galleria/src/themes/classic/classic-demo.html
0
 
elliottbenzleAuthor Commented:
I figured it out. add class="active" to the <li> element.

Thanks for the help.
0
 
elliottbenzleAuthor Commented:
This is the correct solution. Thanks to the others who answered.
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now