Hallo,
ich möchte eine Gallerie einbinden die wie folgt aussieht:
http://www.roadrash.no/hs-support/three-mini-galleries.html
Nur mit 5 Gallerien nebeneinander oder 4, das weiß ich noch nicht genau. :)
Wenn man dann auf die Bilder drauf klickt landet man auf den jeweiligen Bilder die zu dem album gehören.
(Zur Info: Bilder sind in ftp-Servr gespeichert, werden also wie <a href eingebunden)
Ich habe auch schon gesehen das ich mir den seiten-Quelltext einzeigen lassen kann und dort sogar steht was ich tun soll..nur ist meine html-Sprache :) noch nicht soooooo ausgeprägt und ich versteh nur BAHNHOF! :)
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three mini galleries (hidden galleries) in one page</title>
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
</head>
<body>
<h4>Three mini galleries (hidden galleries) in one page</h4>
<!--
3) Put the thumbnails inside a div for styling
THUMB FOR FIRST GALLERY
-->
<div class="highslide-gallery">
<!--
4) This is how you mark up the thumbnail image with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image.
-->
<a id="thumb1" href="images/004.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'test1'})">
<img src="images/004.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>
<!--
5 (optional). This is how you mark up the caption. The correct class name is important.
-->
<div class="highslide-caption">
Caption for the first image. This caption can be styled using CSS.
</div>
<!--
THUMB FOR SECOND GALLERY - with different slideshowGroup and different id
-->
<a id="thumb2" href="images/009.jpg" class="highslide" onclick="return hs.expand(this, {slideshowGroup: 'test2'})">
<img src="images/009.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>
<div class="highslide-caption">
Caption for the first image. This caption can be styled using CSS.
</div>
<!--
THUMB FOR THIRD GALLERY - with different slideshowGroup and different id
-->
<a id="thumb3" href="images/012.jpg" class="highslide" onclick="return hs.expand(this, {slideshowGroup: 'test3'})">
<img src="images/012.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>
<div class="highslide-caption">
Caption for the first image. This caption can be styled using CSS.
</div>
<!--
6) Put the subsequent thumbnails in a hidden container. The thumbnailId parameter ensures
these thumbnails zoom back out to the right thumbnail when closed.
-->
<div class="hidden-container">
<!-- Hidden images for the first thumb -->
<a href="images/005.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1', slideshowGroup: 'test1' })"></a>
<div class="highslide-caption">
Caption for the second image.
</div>
<a href="images/006.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1', slideshowGroup: 'test1' })"></a>
<div class="highslide-caption">
Caption for the third image.
</div>
<!-- Hidden images for the second thumb -->
<a href="images/010.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 'test2' })"></a>
<div class="highslide-caption">
Caption for the second image.
</div>
<a href="images/011.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 'test2' })"></a>
<div class="highslide-caption">
Caption for the third image.
</div>
<!-- Hidden images for the third thumb -->
<a href="images/013.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb3', slideshowGroup: 'test3' })"></a>
<div class="highslide-caption">
Caption for the second image.
</div>
<a href="images/014.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb3', slideshowGroup: 'test3' })"></a>
<div class="highslide-caption">
Caption for the third image.
</div>
</div>
</div>
</body>
</html>Das steht was ich wo und wie einfügen soll nur leider versteh ich das nicht ganz... kann mir da evtl jemand helfen??
kann ich auf diese Art auch mehr als drei Alben einfügen...???
Mit einer tabelle müsste ich doch 4 untereinander und 4 nebeneinander bekommen, oder??
Vielen Dank im Voraus