Hallo,
und auf ein neues.. :)
Ich möchte gerne auf meiner Seite eine Foto-Gallerie einbauen bei der auf jeder Seite 4x4 Alben sind.
Wenn man das Vorschaubild des Albums anklickt kommt wird ein externes fenster geöffnet wo man alle Bilder in diesem Album durchklicken kann (http://www.roadrash.no/hs-support/three-mini-galleries.html) So soll das mal ungefähr aussehen.
Nur eben mit vier Alben nebeneinander und das in vier Zeilen (wahrscheinlich über eine Tabelle, oder??)
Auf der Seite die ich als Beispiel genannt habe lässt sich der Quelltext super anzeigen und dort steht auch was gemacht werden soll...NUN MEIN PROBLEM!!!! ICH VERSTEH ES NICHT ALLES
Kann mir jemand helfen es in Blondinnen bzw Anfängersprache :):???::oops: zu übersetzen und mir so helfen das ich es auch meine sete eingebunden bekomme?
Das wäre super lieb.
Vielen Dank im Voraus
Hier der Seitenquelltext der Beispielseite:
HTML
<!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>