VollDerNewb
Gesperrt
Hallo,
ich möchte mir eine kleine Website basteln, auf der ich meine Fotos präsentieren kann.
Nun hatte ich mir ein Javascript-Gallerie ausgesucht und bin dabei die irgendwie anzupassen :(
Leider kann ich eigentlich garkeine Programmiersprache richtig, und habe mir bisher alles ergooglet.
So sieht für euch wahrscheinlich auch nun der Quellcode aus ;)
Ich möchte dass sich alle Elemente nach dem mittig zentrierten großen Vorschaubild richten, das müsste wohl "demo" sein, außerdem sollten die kleinen Vorschaubilder "gallery_demo" links neben dem großen bild "demo" mit abstand xy sein.
Ich weiß nicht ob das in irgendeiner weiße nachvollziehbar ist :sad:
braucht ihr noch mehr Informationen ? wenn ja, welche ?
Wäre über Hilfe wirklich sehr dankbar, hab mir daran schon die Zähne ausgebissen...
ich möchte mir eine kleine Website basteln, auf der ich meine Fotos präsentieren kann.
Nun hatte ich mir ein Javascript-Gallerie ausgesucht und bin dabei die irgendwie anzupassen :(
Leider kann ich eigentlich garkeine Programmiersprache richtig, und habe mir bisher alles ergooglet.
So sieht für euch wahrscheinlich auch nun der Quellcode aus ;)
Code:
<html>
<head>
<div style="top: 20; left: 539; position: absolute; z-index: 1;visibility: show;">
<h1>blogso</h1></div>
<title>blogso</title>
<div style="top: 0; left: 780; position: absolute;left: 80px;top:25px; z-index: 1;visibility: show;">
<a href="/index.htm">«----- back to galleries</a></div>
<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="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
$('ul.gallery_demo').galleria({
history : false, // activates the history object for bookmarking, back-button etc.
clickNext : false, // 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
image.css('display','none').fadeIn(1000);
}
caption.css('display','none').fadeIn(1000);
// fetch the thumbnail container
var _li = thumb.parents('li');
// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);
// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');
// 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
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});
</script>
<style media="screen,projection" type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;background:black;color:#bba;font:80%/140% georgia,serif;}
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{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;margin-left:60;float:center}
.galleria_container{margin:0 auto 60px auto;height:438px;width:700px;float:center;}
.gallery_demo li.hover{border-color:#bbb;}
.gallery_demo li.active{border-style:solid;border-color:#222;}
.gallery_demo{width:200px;float:left;}
.gallery_demo{position:relative;margin-top 500px; margin: 0 auto 60px auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{margin-auto}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
.nav{margin-auto}
#main_image{margin:0 auto 60px auto;height:458px;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;}
</style>
</head>
<body>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<li><img src="img/sprung.jpg" alt="Sproing!" title="Sproing"></li>
<li><img src="img/nebel004.jpg" alt="Nebel" title="Nebeol"></li>
<li><img src="img/matsch.jpg" alt="matsch" title="MATSCH"></li>
<li><img src="img/kirche.jpg" alt="Kirche" title="kiiiirche"></li>
<li><img src="img/himmel 003 copy.jpg" alt="himmel" title="himmell"></li>
<li><img src="img/blume.jpg" alt="plume" title="eine blume"></li>
<li><img src="img/40jahrerock 059.jpg" alt="jahre rock" title="40 jahre"></li>
<li class="active"><img src="img/17.November (himmel).jpg" alt="himmel" title="himmel"></li>
<li><img src="img/40jahrerock 05v9.jpg" alt="farbe" title="frabe"></li>
</ul>
</div>
<div>
<div style="top: 22; left: 799; position: absolute; z-index: 1;visibility: show;">
<class="nav"><a href="#" onClick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onClick="$.galleria.next(); return false;">next »
</div>
</html>Ich weiß nicht ob das in irgendeiner weiße nachvollziehbar ist :sad:
braucht ihr noch mehr Informationen ? wenn ja, welche ?
Wäre über Hilfe wirklich sehr dankbar, hab mir daran schon die Zähne ausgebissen...
