Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2011-02-17
5
Medium Priority
?
277 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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:Gurvinder Pal Singh
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

604 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