Jsgallery2 Bild zentrieren

Hallo ich versuche das Hauptbild in der Gallerie zu zentrieren die Thumnails sollen dabei aber rechts bleiben. Ich habe das Javascript dabei so angepasst, dass die Bilder im div bigimageContainer in ihrer Originalgröße dargestellt werden, da sie bei mir immer auf die größe des ersten Bildes verzerrt wurden. Nun ist aber die Breite des Bildes dynamisch und ändert sich mit einem Klick auf eines der Thumbnails. Also habe ich das Template so verändert, dass ich noch ein weiteres Div eingfügt habe namens jsgwrapper. Es umschließt dass bigimagecontainer Div. Anschließend noch folgende Funktion in den Head eingefügt

Code:

---

function centerimg() {
var jsgwrap = document.getElementById("jsgwrap");
jsgimg = document.getElementById("bigImage").width;
jsgwrap.set ('width', jsgimg);
};

---

und anschließend mithilfe des Templates per onclick ausführen lassen. Allerdings funktioniert es nicht. Selbst wenn ich die Funktion am Ende des Dokumentes aufrufe, ist zwar im Html die richtige Breite eingestellt, allerdings wird das Div nicht zentriert obwohl margin-left sowie margin-right auf Auto eingestellt sind.
Vielen Dank schonmal im vorraus.
Grüße,
b3lzebub.

Habe das Bild nur durch Anpassung des Templates und des CSS zentriert.

Für dynamische Bildschirmbreite habe ich das Modul umgeschrieben, so dass das Bild in sienen tatsächlichen Seitenverhältnis im Cache abgelegt wird.

Falls Du noch die Details dazu benötigst sag Bescheid. Ich schaue mal nach und poste, die Lösung hier auch noch.

Gerade bin ich aber mit dem unschönen Laufzeitfehler beschäftigt, den die jsGallery2 im IE7 (und nur im IE7) verursacht.

Hier nun die versprochenen Code-Schnippsel

/system/modules/pk_jsgallery2/ContentJSGallery2.php

Ich poste nichtdie komplette Datei. Wichtig ist sowohl bei den Verzeichnissen (is_Dir) als auch bei den Dateien (is_File) folgenden Block zu verändern, damit die Bilder richtig berechnet werden

PHP-Code:

---

                    //-- Image resizing
                    if($objSettings->BigImage)
                    {
                      $arrElements[$x]['img_size'] = unserialize($objSettings->BigImageSize);
                      /**
                       * modified by teo from dwebx.de
                       * to scale pictures proportionally by setting
                       * manipulate big image only for one axis (x or y) in the backend
                       * (for MS IE compatibility it's necessary to set the other
                       * axis to a valid value to avoid 1px height or width)
                       */
                      if ( empty($arrElements[$x]['img_size'][0]) )
                      {
                        $arrjsgallery2BigSize[0] = $objFile->width;
                        $arrElements[$x]['img_size'][0] = $objFile->width;
                      }
                      if ( empty($arrElements[$x]['img_size'][1]) )
                      {
                        $arrjsgallery2BigSize[1] = $objFile->height;
                        $arrElements[$x]['img_size'][1] = $objFile->height;
                      }
                       #print_r($arrjsgallery2BigSize); // debug
                      /**
                       * END OF modification
                       */
                      $arrElements[$x]['src'] = $this->getImage($objElements->src, $arrjsgallery2BigSize[0], $arrjsgallery2BigSize[1]);
                    }
                    else
                    {
                      $arrElements[$x]['img_size'] = array($objFile->width,$objFile->height);
                      $arrElements[$x]['src'] = $objElements->src;
                    } 


---

Das jsGallery2 Template habe ich folgendermaßen geändert (hier müssen Anpassungen für Deinen Fall vorgenommen werden, da Du die Thumbnals ja daneben haben mächtest. In meinem Fall sind sie darunter.) Habe bei noch zusätzlich DIVs passend zum darauf folgenden CSS gewrappt.

mod_jsgallery2.tpl

PHP-Code:

---

<?php if ($this->headline): ?><<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>><?php endif; ?>
<?php if(is_array($this->elements)): ?>
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
  <div id="show<?php echo $this->id; ?>" class="jsgallery">

    <div id="bigimageWrapper">
      <div id="bigimageContainer">
        <img src="<?php echo $this->elements[0]['src']; ?>" alt="<?php echo $this->elements[0]['alt']; ?>" id="bigImage" />
      </div>
    </div>
    <div id="description"></div>
 
    <div id="pagerWrapper">
      <div id="pagerContainer">
        <div id="thumbs">
          <div id="pageContainer">
        <?php
              $count = 0;
            ?>
            <?php for ( $x = 0; $x < $this->siteCount; $x++ ): ?>
              <div id="page<?php echo $x; ?>" class="page">
                <?php for($y = $count; $y < $count+$this->maxThumbs; $y++): ?>
                <?php if($y < $this->ThumbsTotal): ?>
                <div id="image<?php echo $this->elements[$y]['id']; ?>" class="thumbnail">
                  <a href="?image=<?php echo $this->elements[$y]['src']; ?>" rel="<?php echo $this->elements[$y]['src']; ?>" ><img src="<?php echo $this->elements[$y]['thumb_src']; ?>" width="<?php echo $this->elements[$y]['thumb_size'][0]; ?>" height="<?php echo $this->elements[$y]['thumb_size'][1]; ?>" alt="<?php echo $this->elements[$y]['alt']; ?>" title="<?php echo $this->elements[$y]['alt']; ?>" /></a>
                </div>  
                <?php endif; ?>
              <?php endfor; ?>
            </div>
            <?php $count+=$this->maxThumbs; ?>
            <?php endfor; ?>
          </div>
        </div>
        <?php if($this->Handle): ?>
      <a style="visibility: hidden;" href="#" onclick="myGallery.prevPage(); return false;" id="prev"><img src="<?php if($this->ThumbPrevHandle): echo $this->ThumbPrevHandle; ?><?php else: ?>system/modules/pk_jsgallery2/html/prev_page.png<?php endif; ?>" alt="back" style="border: 0px;"/></a>
          <span id="pageShow"><span id="pageCurrent"></span>/<?php print $this->siteCount; ?></span>
          <a style="visibility: hidden;" href="#" onclick="myGallery.nextPage(); return false;" id="next"><img src="<?php if($this->ThumbNextHandle): echo $this->ThumbNextHandle; ?><?php else: ?>system/modules/pk_jsgallery2/html/next_page.png<?php endif; ?>" alt="back" style="border: 0px;"/></a>
        <?php endif; ?>
      </div>
    </div>
  
  </div>
</div>  
<?php endif; ?>

---

jsgallery2_css_standard.tpl

Code:

---

#show<?php echo $this->id; ?> {
  background-color: #202020;
  background-color: #F6F6F6;
  border: solid 1px #DFDFDF;
  border-radius: 10px;
  -moz-border-radius: 10px;
  width: <?php echo $this->arrjsgallery2Size[0]-20; ?>px;
  height: <?php echo $this->arrjsgallery2Size[1]; ?>px;
  overflow: hidden;
  padding: 10px 10px 5px 10px; 
}

div.jsgallery {
  text-align: center;
}

#thumbs {
  overflow: hidden;
  position: relative;
}

#pageContainer {
  width: 3900px;
}
#pagerContainer {
  background-color: #101010;
  background-color: #F6F6F6;
  border-radius: 5px;
  -moz-border-radius: 5px;
  width: <?php echo $this->pagerContainerWidth; ?>;
  height: <?php echo $this->pagerContainerHeight; ?>;
  padding: 0 4px 5px 0;
  margin: 0px auto;
}
               
.page {
  float: left;
  width: <?php echo $this->page; ?>;
  margin: <?php echo $this->thumbContainerMargin; ?>;
}
               
.thumbnail {
  float: left;
  margin: <?php echo $this->thumbnailMargin; ?>;
  width: <?php echo $this->arrjsgallery2ThumbSize[0]; ?>px;
  height: <?php echo $this->arrjsgallery2ThumbSize[1]; ?>px;
}
               
.thumbnail img {
  float: left;
  margin: <?php echo $this->thumbnailMargin; ?>;
  width: <?php echo $this->arrjsgallery2ThumbSize[0]; ?>px;
  height: <?php echo $this->arrjsgallery2ThumbSize[1]; ?>px;
}

pre {
  border: 1px solid #fff;
  background-color: #333;
  padding: 5px;
}
               
/* this is for the loading.gif */
.thumbnail div img {
  margin: 22px;
}
               
.thumbnail a img {
  width: <?php echo $this->arrjsgallery2ThumbSize[0]; ?>px;
  height: <?php echo $this->arrjsgallery2ThumbSize[1]; ?>px;
}

.thumbnail {
  cursor: pointer;
}

#bigimageWrapper {
  background-color: #202020;
  background-color: #F6F6F6;
  <?php if ( "" != $this->arrjsgallery2BigSize[1] ) { echo "height: " . $this->arrjsgallery2BigSize[1]."px;";} ?>
  width: <?php echo $this->arrjsgallery2Size[0]-20; ?>px;
  text-align: center;
}               
#bigimageContainer {
  position: relative;
}
               
#bigImage {
  border: 0px solid #fff;
}

#prev {
  float: left;
  margin-left: <?php echo $this->prevMarginLeft; ?>px;
  outline: none;
}

#next {
  float: right;
  margin-right: <?php echo $this->nextMarginRight; ?>px;
  outline: none;
}

a img {
  border: 0px solid #fff;
}

#description {
  clear: both;
  color: #505050;
  font-size: 14px;
  font-weight: normal;
  line-heigt: 1.5;
  padding: 5px 0 5px  0;
}

---

Hier ein Beispiel.

In dieser version und meinen vorherhenden Templates ist noch ein Anzeige für
Seite/Seiten eingebaut.

/system/modules/pk_jsgallery2/html/js/jsgallery2.js
Zeile 47

Code:

---

$('pageCurrent').set('text', this.currentPageNumber + 1 );

---

Zeile 349

Code:

---

$('pageCurrent').set('text', pageNumber + 1 );

---

Ansonsten einfach den <span> im Template entfernen (es ist der Bereich zwischen den Vor/Zurück-Pfeilen) und die JS-Änderungen ignorieren.

Code:

---

<span id="pageShow"><span id="pageCurrent"></span>/<?php print $this->siteCount; ?></span>

---

ACHTUNG: Das ganze ist 'natürlich' nicht updatesicher. Ich habe die Extension im Backend vor Updates geschützt.

Hallo,

ich möchte das jeweilige Hauptbild in eine lightbox reinlinken, gibts da einen einfachen weg?

PHP-Code:

---

<a rel="lightbox[100]" title="<?php echo $this->elements[0]['alt']; ?>"  href="<?php echo $this->elements[0]['src']; ?>" >

---

Damit bekomkme ich zwar einen Link, dieser bezieht sich aber leider immer auf das erste Bild.

Danke,
Severin

So, habe es geschafft!
inkl. lightbox auf die source files + title (description)
für alle die es ebenfalls brauchen können, anbei der neue code (ist mit Sicherheit nicht die schönste Lösung)

demo: http://ida.event7.net/index.php/refs.html

#mod_jsgallery2.tpl

Code:

---

<script>
function push_in_href(vt) {
        document.getElementById('yeha').href=vt;

}
function push_in_title(x) {
        document.getElementById('yeha').title=x;
}
</script>
<?php if ($this->headline): ?><<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>><?php endif; ?>
<?php if(is_array($this->elements)): ?>
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
  <div id="show<?php echo $this->id; ?>" class="jsgallery">
    <div id="pagerContainer">
          <div id="thumbs">
            <div id="pageContainer">
            <?php
        $count = 0;
        ?>
        <?php for ( $x = 0; $x < $this->siteCount; $x++ ): ?>
        <div id="page<?php echo $x; ?>" class="page">
          <?php for($y = $count; $y < $count+$this->maxThumbs; $y++): ?>
            <?php if($y < $this->ThumbsTotal): ?>
              <div id="image<?php echo $this->elements[$y]['id']; ?>" class="thumbnail">
                <a href="?image=<?php echo $this->elements[$y]['src']; ?>" rel="<?php echo $this->elements[$y]['src']; ?>"><img src="<?php echo $this->elements[$y]['thumb_src']; ?>" width="<?php echo $this->elements[$y]['thumb_size'][0]; ?>" height="<?php echo $this->elements[$y]['thumb_size'][1]; ?>" alt="<?php echo $this->elements[$y]['alt']; ?>" title="<?php echo $this->elements[$y]['alt']; ?>" /></a>
              </div> 
            <?php endif; ?>
          <?php endfor; ?>
        </div>
        <?php $count+=$this->maxThumbs; ?>
        <?php endfor; ?>
          </div>
    </div>
<?php if($this->Handle): ?>
          <a style="visibility: hidden;" href="#" onclick="myGallery.prevPage(); return false;" id="prev"><img src="<?php if($this->ThumbPrevHandle): echo $this->ThumbPrevHandle; ?><?php else: ?>system/modules/pk_jsgallery2/html/prev_page.png<?php endif; ?>" alt="back" style="border: 0px;"/></a>
          <a style="visibility: hidden;" href="#" onclick="myGallery.nextPage(); return false;" id="next"><img src="<?php if($this->ThumbNextHandle): echo $this->ThumbNextHandle; ?><?php else: ?>system/modules/pk_jsgallery2/html/next_page.png<?php endif; ?>" alt="back" style="border: 0px;"/></a>
        <?php endif; ?>
  </div>
  <div id="bigimageContainer">
  <a rel="lightbox[100000]" href="" title="" id="yeha"><img src="<?php $x=$this->elements[0]['src']; echo $x; ?>" width="<?php echo $this->elements[0]['img_size'][0]; ?>" height="<?php echo $this->elements[0]['img_size'][1]; ?>" alt="<?php echo $this->elements[0]['alt']; ?>" id="bigImage" />
</a>

  </div>
  <div id="description"></div>
</div>
</div> 
<?php endif; ?>

---

#jsgallery2.js

Code:

---


var JSGallery2 = new Class({
        Implements: Options,
        options: {
                'borderWidthDeselected': 2,        //the width of the border of an deselected image (should be the same as in css)
                'borderWidthSelected': 7,        //border width of the selected image
                'borderColor': '#fff',                //the color of the borders
                'loadingMask': '#000',                //color of the mask overlay during loading of the big images
                'loadingOpacity': 0.6,                //opacity of the border div during loading (including the mask)
                'loadingImage': 'system/modules/pk_jsgallery2/html/loading.gif',                //you may specify a loading image which is displayed while the big images are being loaded
                'selectSpeed': 200,                        //the duration of the select effect in ms (high values will make it look ugly)
                'fadeSpeed': 250,                        //the duration of the image fading effect in ms
                'pageSpeed': 1000,                        //the duration of the change page effect in ms
                'prevHandle': null,                        //if you pass a previous page handle in here, it will be hidden if it's not needed
                'nextHandle': null,                        //like above, but for next page
                'titleTarget': null,                //target HTML element where image texts are copied into
                'initialIndex': -1,                        //which thumb to select after init. you could create deep links with it.
                'maxOpacity': 0.8,                        //maximum opacity before cursor reaches prev/next control, then it will be set to 1 instantly.
            'PrevPageHandle': null,
            'NextPageHandle:': null,
            'PrevPageHandleWidth': null,
            'NextPageHandleWidth:': null
        },
        /**
        *        Constructor. Starts up the whole thing :-)
        *
        *        This script is free to use. It has been created by http://www.aplusmedia.de and
        *        can be downloaded on http://www.esteak.net.
        *        License: GNU GPL 2.0: http://creativecommons.org/licenses/GPL/2.0/
        *        Example on: http://blog.aplusmedia.de/moo-gallery2
        *        Known issues:
        *        - preloading does not care about initialIndex param
        *        - hovering to a control over the border of the big image will make the other one flickering
        *        - if you enter and leave the control area very quickly, the control flickers sometimes
        *        - does not work in IE6
        *
        *        @param {Array} thumbs, An array of HTML elements
        *        @param {HTMLelement} bigImageContainer, the full size image
        *        @param {HTMLelement} pageContainer, If you have several pages, put them in this container
        *        @param {Object} options, You have to pass imagesPerPage if you have more than one!
        */
        initialize: function(thumbs, bigImageContainer, pageContainer, options) {
                this.currentPageNumber = 0;
                this.loadedImages = 0;
                this.blockKeys = false;
                this.imagesPerPage = pageContainer.getFirst().getChildren().length;
                this.setOptions(options);
                this.thumbs = thumbs;
                this.bigImage = bigImageContainer;
                this.pageContainer = pageContainer;
                this.convertThumbs();
                if(this.options.initialIndex != -1) {
                        this.selectByIndex(this.options.initialIndex);
                } else {
                        this.gotoPage(0);
                }
                this.createControls();
                if($defined(this.options.loadingImage)) {
                        new Asset.image(this.options.loadingImage);
                }
                this.loadNextImage();
        },
        /**
        *        Creates the previous and next links over the big image.
        */
        createControls: function() {
       
                  this.prevLink = new Element('a', {
                        events: {
                                'click': this.prevImage.bindWithEvent(this),
                                'mouseleave': this.mouseLeaveHandler.bindWithEvent(this)
                        },
                        styles: {
                                'width': this.options.PrevPageHandleWidth+'px',
                                'display': 'block',
                                'position': 'absolute',
                                'margin-left' : '-1px',
                                'top': 0,
                                'height' : '98%',
                                'background': 'url("'+this.options.PrevPageHandle+'") no-repeat 0 50%',
                                'outline': 'none'
                        },
                        'href': '#'
                }).injectInside(this.bigImage.getParent());
                this.prevLink.addEvent('mouseover', this.focusControl.bindWithEvent(this, this.prevLink));
                this.nextLink = this.prevLink.clone().injectAfter(this.prevLink).set({
                        'events': {
                                'click': this.nextImage.bindWithEvent(this),
                                'mouseleave': this.mouseLeaveHandler.bindWithEvent(this)
                        },
                        'styles': {
                                'right': 0,
                                'background-image': 'url("'+this.options.NextPageHandle+'")'
                        }
                });
               
                this.prevLink.setStyle('left', 1);       
                this.nextLink.addEvent('mouseover', this.focusControl.bindWithEvent(this, this.nextLink));
                this.bigImage.addEvents({
                        'mousemove': this.mouseOverHandler.bindWithEvent(this),
                        'mouseleave': this.mouseLeaveHandler.bindWithEvent(this)
                });
                document.addEvent('keydown', this.keyboardHandler.bindWithEvent(this));
                this.mouseLeaveHandler();
        },
        /**
        * Focuses one control
        *
        * @param {Event} event
        * @param {HTMLElement} control
        */
        focusControl: function(event, control) {
                control.set('opacity', 1);
        },
        /**
        *        Handles mouse movement over the big image.
        * @param {Event} event
        */
        mouseOverHandler: function(event) {
                var currentIndex = this.thumbs.indexOf(this.selectedContainer);
                //this makes the control on the other side fade out in just the moment when you reach one
                var activeRange = this.bigImage.getSize().x;
                var op = 0;
                if(currentIndex < this.thumbs.length - 1) {
                        op = this.options.maxOpacity - this.getDistanceToMouse(this.nextLink, event) / activeRange;
                }
                this.nextLink.set('opacity', op);
                op = 0;
                if(currentIndex > 0) {
                        op = this.options.maxOpacity - this.getDistanceToMouse(this.prevLink, event) / activeRange;
                }
                this.prevLink.set('opacity', op);
        },
        /**
        * Hides the controls.
        */
        mouseLeaveHandler: function() {
                this.nextLink.set('opacity', 0);
                this.prevLink.set('opacity', 0);
        },
        /**
        * Handles keyboard interactions.
        * @param {Event} event
        */
        keyboardHandler: function(event){
                if(!this.blockKeys) {
                        if(event.code >= 49 && event.code <= 57) {
                                this.gotoPage(event.key - 1);
                        } else if (event.key == "left") {
                                this.prevImage(event);                                       
                        } else if (event.key == "right") {
                                this.nextImage(event);
                        }
                }
        },
        /**
        *        Returns the distance to the mouse from the middle of a given element.
        *        @param {HTMLelement} element
        *        @param {Event} event
        *        @return integer
        */
        getDistanceToMouse: function(element, event) {
                var s = element.getSize();
                var xDiff = Math.abs(event.client.x - (element.getLeft() + s.x / 2));
                var yDiff = Math.abs(event.client.y - (element.getTop() + s.y / 2));
                return Math.sqrt( Math.pow(xDiff, 2) + Math.pow(yDiff, 2) );
        },
        /**
        *        Adds the border to the thumbs and so on. (conversion of static thumbs)
        */
        convertThumbs: function() {
                this.thumbs.each(function(thumbContainer, count) {
                        this.convertThumb(thumbContainer, count);
                }, this);
        },
        /**
        * Converts one single thumb.
        * @param {HTMLelement} thumbContainer
        * @param {Integer} count
        */
        convertThumb: function(thumbContainer, count) {
                if(!$defined(thumbContainer)) {
                        return;
                }
                thumbContainer.addEvent('click', this.select.bind(this, thumbContainer)).setStyle('position', 'relative').set('counter', count);
                var bigImage = thumbContainer.getFirst().set('href', 'javascript: void(0);').get('rel');
                var border = new Element('div', {
                        styles: {
                                'border': this.options.borderWidthDeselected + 'px solid ' + this.options.borderColor,
                                'width': thumbContainer.getSize().x,
                                'height': thumbContainer.getSize().y,
                                'position': 'absolute',
                                'background-color': this.options.loadingMask,
                                'top': 0,
                                'left': 0
                        },
                        'rel': bigImage,
                        'description': thumbContainer.getElements('img')[0].get('title')
                }).injectTop(thumbContainer).set('opacity', this.options.loadingOpacity);
                thumbContainer.getElements('img')[0].set('title', '');

        },
                       
        /**
        *        Removes key blocking.
        */
        unBlockKeys: function() {
                this.blockKeys = false;
        },
        /**
        *        Selects a certain image. (You have to pass the outer container of the image)
        *        @param {HTMLelement} container
        */
        select: function(container) {
                if(this.blockKeys || !$defined(container)) {
                        return false;
                }
                this.blockKeys = true;
                if($defined(this.selectedContainer)) {
                        //this prevents an ugly effect if you click on the currently selected item
                        if(container == this.selectedContainer) {
                                this.unBlockKeys();
                                return false;
                        }
                        this.deselect(this.selectedContainer);
                }
                //if target image is not on current page, we have to go there first
                var targetPage = Math.floor(container.get('counter') / this.imagesPerPage);
                if(this.currentPageNumber != targetPage) {
                        this.gotoPage(targetPage, container);
                }
                this.selectedContainer = container;
                //make calculations a bit more handy
                var s = container.getSize();
                var des = this.options.borderWidthDeselected;
                var sel = this.options.borderWidthSelected;
                new Fx.Morph(container.getFirst(), {
                        duration: this.options.selectSpeed,
                        transition: Fx.Transitions.Quad.easeOut
                }).start({
                        'border-width': [des, sel + 'px'],
                        'width': [s.x, s.x - 2 * (sel - des) ],
                        'height': [s.y, s.y - 2 * (sel - des)]
                });
                var source = container.getFirst();
                this.setImage(source.get('rel'), source.get('description'));
                push_in_title(source.get('description'));
        },
        /**
        * Preloads one big image
        */
        loadNextImage: function() {
                var thumbContainer = this.thumbs[this.loadedImages].getFirst();
                if($defined(this.options.loadingImage)) {
                        new Element('img', {'src': this.options.loadingImage}).injectTop(thumbContainer);;

                }
                var imageToLoad = thumbContainer.get('rel');
                new Asset.image(imageToLoad, {
                        onload: this.imageLoaded.bind(this, this.thumbs[this.loadedImages])
                });
        },
        /**
        * Callback after an image has been successfully preloaded.
        * Removes the loading effects from the border div.
        * @param {HTMLElement} thumbContainer the thumb wrapper div
        */
        imageLoaded: function(thumbContainer) {
                this.loadedImages++;
                if($defined(this.options.loadingImage)) {
                        //remove loading gif
                        thumbContainer.getFirst().getFirst().destroy();
                }
                //remove loading styles
                thumbContainer.getFirst().setStyle('background-color', 'transparent').setOpacity(1);
                if(this.loadedImages < this.thumbs.length) {
                        this.loadNextImage();
                }
        },
        /**
        * Selects an image by its thumbnail index.
        * @param {integer} index of the thumbnail, starting with 0
        */
        selectByIndex: function(index) {
                this.mouseLeaveHandler();
                if(index < 0 || this.thumbs.length <= index) {
                        index = 0;
                }
                this.select(this.thumbs[index]);
        },
        /**
        *        Opposite to method above.
        *        @param {HTMLelement} container
        */
        deselect: function(container) {
                new Fx.Morph(container.getFirst(), {duration: this.options.selectSpeed, transition: Fx.Transitions.Quad.easeOut}).start({
                        'border-width': this.options.borderWidthDeselected + 'px',
                        'width': container.getSize().x,
                        'height': container.getSize().y
                });
        },
        /**
        *        Changes the full size image to given one.
        *        @param {String} newSrc, new target of the full size image
        *        @param {String} newText, new text for the info element
        */
        setImage: function(newSrc, newText) {
                var effect = new Fx.Tween(this.bigImage, {duration: this.options.fadeSpeed, transition: Fx.Transitions.Quad.easeOut});
               
                effect.start('opacity', 0).chain(function(){
                        this.bigImage.set('src', newSrc);
                        push_in_href(newSrc);
                       
                        if($defined($(this.options.titleTarget))) {
                                $(this.options.titleTarget).set('html', newText);
                        }
                        this.mouseLeaveHandler();
                        effect.start('opacity', 1).chain(this.unBlockKeys.bind(this));
                }.bind(this));
        },
        /**
        *        Navigates to previous page.
        */
        prevPage: function() {
                this.gotoPage(this.currentPageNumber - 1);
        },
        /**
        *        Navigates to next page.
        */
        nextPage: function() {
                this.gotoPage(this.currentPageNumber + 1);
        },
        /**
        *        Selects the previous image.
        */
        prevImage: function(e) {
                e = new Event(e).stop();
                this.selectByIndex(this.thumbs.indexOf(this.selectedContainer) - 1);
        },
        /**
        *        Selects the next image.
        */
        nextImage: function(e) {
                e = new Event(e).stop();
                this.selectByIndex(this.thumbs.indexOf(this.selectedContainer) + 1);
        },
        /**
        *        Navigates to given page and selects the first image of it.
        *        Also hides the handles (if set).
        *        @param {Integer} pageNumber, index of the target page (0-n)
        *  @param {HTMLElement} selectImage, optionally receives a particular image to select
        */
        gotoPage: function(pageNumber, selectImage) {
                //if we like to select another image on that page than the first one
                selectImage = $pick(selectImage, this.thumbs[pageNumber * this.imagesPerPage]);
                var lastPage = Math.ceil(this.thumbs.length / this.imagesPerPage);
                if(pageNumber >= 0 && pageNumber < lastPage) {
                        this.pageContainer.set('tween', {
                                duration: this.options.pageSpeed,
                                transition: Fx.Transitions.Quint.easeInOut
                        });
                        this.pageContainer.tween('margin-left', this.pageContainer.getFirst().getSize().x * pageNumber * -1);
                        this.currentPageNumber = pageNumber;
                        this.select(selectImage);
                       
                        //update handles
                        if($defined(this.options.prevHandle)) {
                                new Fx.Tween(this.options.prevHandle, {duration:this.options.fadeSpeed * 2}).start('opacity', pageNumber == 0 ? 0 : 1);
                        }
                        if($defined(this.options.nextHandle)) {
                                new Fx.Tween(this.options.nextHandle, {duration:this.options.fadeSpeed * 2}).start('opacity', pageNumber == lastPage - 1 ? 0 : 1);
                        }
                }
        }
});

---

Die JS Datei drückt nun die beiden Werte (source + title) in jeweils eine Funktion, diese drückt das Ergebniss dann weiter an den href und title tag des link.

Lieben Gruß,
Severin

besonders "unschön" ist, das dein Code im Tooltip erscheint! Mir ist es auch nicht gelungen einen Link in die Mediabox zu setzen, ohne das der HTML-Code im Tooltip erscheint.

Ich kann aber auch nicht verstehen, warum strip_tags() hier nicht greift.. eigentlich ist es genau dafür gedacht..

Hätte natürlich auch zur Folge, dass HTML Attribute auch in der Lightbox nicht mehr da sind..

hmpf..

LG,
Sev