Moin moin!
Ich versuche gerade eine Seite aufzubauen, in der Bilder angezeigt werden.
Nun habe ich beispielsweise 3 Alben, möchte das alle auf der einen Seite angezeigt werden, allerdings erst nach anklicken von z.B. "Album1" soll Album1 angezeigt werden.
Klicke ich nun "Album2" an, soll das Album1 wieder verkleinert werden (nur noch die Überschrift) und Album 2 soll geöffnet werden.
Diese "Alben" habe ich ebenfalls per Java geladen.
Hier mal ein Auszug aus meinem Quellcode:
Ich erwarte natürlich absolut kein fertiges Script von euch, aber vielleicht kann mir jemand sagen, wonach ich suchen kann, um das umzusetzen!
Vielen Dank!
Ich versuche gerade eine Seite aufzubauen, in der Bilder angezeigt werden.
Nun habe ich beispielsweise 3 Alben, möchte das alle auf der einen Seite angezeigt werden, allerdings erst nach anklicken von z.B. "Album1" soll Album1 angezeigt werden.
Klicke ich nun "Album2" an, soll das Album1 wieder verkleinert werden (nur noch die Überschrift) und Album 2 soll geöffnet werden.
Diese "Alben" habe ich ebenfalls per Java geladen.
Hier mal ein Auszug aus meinem Quellcode:
HTML:
<title>...</title>
<script type="text/javascript" src="java/jquery.js" ></script>
<script type="text/javascript" src="java/jquery.nivo.slider.pack.js" ></script>
<script src="java/twitter_widget.js" type="text/javascript" ></script>
<script src="java/galleria-1.2.2.min.js" ></script>
<link href="style.css" rel="stylesheet" media="screen" type="text/css" >
<link rel="stylesheet" href="slider.css" type="text/css" media="screen" >
<script type="text/javascript" >
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', // Specify sets like: 'fold,fade,sliceDown'
slices:15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:false, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
</head>
<body style="background-color:#000000; " >
<script>
$("body").text("jQuery works");
</script>
<script>
if (Galleria) { $("body").text('Galleria works') }
</script>
<div style="" class="design" id="distance" >
</div>
<div style="" id="container" >
.....
<div id="wrapper" >
<div id="slider-wrapper" >
<div id="slider" class="nivoSlider" >
<a href="http://dev7studios.com" ><img src="images/up.jpg" alt="" title="This is an example of a caption" ></a>
<img src="images/slideshow/walle.jpg" alt="" >
<img src="images/slideshow/nemo.jpg" alt="" title="#htmlcaption" >
</div>
<div id="htmlcaption" class="nivo-html-caption" >
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#" >a link</a>.
</div>
</div>
<div id="gallery" style="left:50%; position:relative; margin-left:-309px; width:616px; " >
<img src="images/slideshow/img1.jpg" >
<img src="images/slideshow/img2.jpg" >
<img src="images/slideshow/img3.jpg" >
</div>
<script>
Galleria.loadTheme('themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 618,
height: 500
});
</script>
</div>Ich erwarte natürlich absolut kein fertiges Script von euch, aber vielleicht kann mir jemand sagen, wonach ich suchen kann, um das umzusetzen!
Vielen Dank!
