» »

jQuery Gallery???

jQuery Gallery???

mihec91 ::


Zanima me če se je kdo lotil izdelave jQuery gallery natančneje te na: http://devkick.com/lab/galleria/demo_01... in če mi lahko na kratko razloži kam moram vpisovat kodo ker je zlo veliko tega :D

Najlepša hvala za pomoč

Lp Miha

JayKay ::

ja poglej source strani
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <title>Galleria Demo 1</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="galleria.css" rel="stylesheet" type="text/css" media="screen">
	<script type="text/javascript" src="/media/js/jquery.js"></script>

	<script type="text/javascript" src="jquery.galleria.pack.js"></script>
	<script type="text/javascript">
	jQuery(function($) {
		$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
			history   : true, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#main_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
				// fade in the image & caption
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				// fade out inactive thumbnail
				// fade in active thumbnail
				// add a title for the clickable image
				image.attr('title','Next image >>');
			onThumb : function(thumb) { // thumbnail effects goes here
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
				// fade in the thumbnail when finnished loading
				// hover effects
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
	<style media="screen,projection" type="text/css">
	body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
	h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	.gallery_demo{width:702px;margin:0 auto;}
	.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
	.gallery_demo li div{left:240px}
	.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
	#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
	#main_image img{margin-bottom:10px;}
	.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
	.info p{margin-top:1.6em;}
<h1>Galleria Demo 01</h1>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">

    <li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
    <li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="img/lightning.jpg" alt="Lightning" title="Black &amp; White"></li>
    <li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>

<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
<div class="info">
<p>This demonstration shows you aome more advanced effects you can accomplish with the Galleria plugin. The history object is also active, so feel free to try the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.</p>
<p>This gallery was created from a simple unordered list with images - thumbnails and functionality is all in the Galleria plugin. Viewing this page without javascript or CSS enabled with degrade it into a list of full-size images.</p>
<p>Visit the galleria project: <a href="http://galleria.googlecode.com">http://galleria.googlecode.com</a></p>

<p class="footer"><a href="/lab/galleria/">Galleria home page</a> | <a href="http://monc.se">Made by monc</a></p>

Vključit je potrebno še jquery.js in galeria.js kot je na strani

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297314627 (38776) htmltroubles

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč
151677 (1405) kr?en

jquery in div-i (strani: 1 2 )

Oddelek: Izdelava spletišč
879729 (8467) lisjak

Login popup box login error.

Oddelek: Programiranje
9983 (871) usoban

poravnava li elementov

Oddelek: Izdelava spletišč
81743 (1608) boss-tech

Več podobnih tem