?
Solved

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

Posted on 2011-02-17
5
Medium Priority
?
276 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

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

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

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?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

752 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