Solved

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

Posted on 2011-02-17
5
271 Views
Last Modified: 2012-06-22
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
Comment
Question by:elliottbenzle
  • 3
5 Comments
 
LVL 16

Expert Comment

by:sjklein42
ID: 34922909
In the <body> onload callback,  you could start it going, something like this:

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

Open in new window

0
 
LVL 4

Author Comment

by:elliottbenzle
ID: 34922944
I tried but    onload="$.galleria.next()"     didn't work. Any other ideas?
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34923039
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
 
LVL 4

Accepted Solution

by:
elliottbenzle earned 0 total points
ID: 34923167
I figured it out. add class="active" to the <li> element.

Thanks for the help.
0
 
LVL 4

Author Closing Comment

by:elliottbenzle
ID: 34949975
This is the correct solution. Thanks to the others who answered.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now