Auf Thema antworten 2026

Beitrag

<blockquote data-quote="ingalf" data-source="post: 2018209">Hallo ich habe ein Problem ich habe auf meiner Homepage Lightbox eingebunden das geht soweit auch sehr gut aber leider bekomme ich den Tietel des Bildes nicht angezeigt. Ich habe auch schon bei google gesucht auch einges gefunden aber leider nichts was mir geholfen hat. hir meine css und meine js&nbsp;[PHP]/*Lightbox v2.51by Lokesh Dhakar - http://www.lokeshdhakar.comFor more information, visit:http://lokeshdhakar.com/projects/lightbox2/Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/- free for use in both personal and commercial projects- attribution requires leaving author name, author link, and the license info intact&nbsp;Thanks- Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.- Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.Table of Contents=================LightboxOptionsLightbox- constructor- init- enable- build- start- changeImage- sizeContainer- showImage- updateNav- updateDetails- preloadNeigbhoringImages- enableKeyboardNav- disableKeyboardNav- keyboardAction- endoptions = new LightboxOptionslightbox = new Lightbox options*/(function() {&nbsp; var $, Lightbox, LightboxOptions;&nbsp; $ = jQuery;&nbsp; LightboxOptions = (function() {&nbsp; &nbsp; function LightboxOptions() {&nbsp; &nbsp; &nbsp; this.fileLoadingImage = &#039;images/loading.gif&#039;;&nbsp; &nbsp; &nbsp; this.fileCloseImage = &#039;images/close.png&#039;;&nbsp; &nbsp; &nbsp; this.resizeDuration = 700;&nbsp; &nbsp; &nbsp; this.fadeDuration = 500;&nbsp; &nbsp; &nbsp; this.labelImage = &quot;Bild&quot;;&nbsp; &nbsp; &nbsp; this.labelOf = &quot;von&quot;;&nbsp; &nbsp; }&nbsp; &nbsp; return LightboxOptions;&nbsp; })();&nbsp; Lightbox = (function() {&nbsp; &nbsp; function Lightbox(options) {&nbsp; &nbsp; &nbsp; this.options = options;&nbsp; &nbsp; &nbsp; this.album = [];&nbsp; &nbsp; &nbsp; this.currentImageIndex = void 0;&nbsp; &nbsp; &nbsp; this.init();&nbsp; &nbsp; }&nbsp; &nbsp; Lightbox.prototype.init = function() {&nbsp; &nbsp; &nbsp; this.enable();&nbsp; &nbsp; &nbsp; return this.build();&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.enable = function() {&nbsp; &nbsp; &nbsp; var _this = this;&nbsp; &nbsp; &nbsp; return $(&#039;body&#039;).on(&#039;click&#039;, &#039;a[rel^=lightbox], area[rel^=lightbox]&#039;, function(e) {&nbsp; &nbsp; &nbsp; &nbsp; _this.start($(e.currentTarget));&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.build = function() {&nbsp; &nbsp; &nbsp; var $lightbox,&nbsp; &nbsp; &nbsp; &nbsp; _this = this;&nbsp; &nbsp; &nbsp; $(&quot;&lt;div&gt;&quot;, {&nbsp; &nbsp; &nbsp; &nbsp; id: &#039;lightboxOverlay&#039;&nbsp; &nbsp; &nbsp; }).after($(&#039;&lt;div/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; id: &#039;lightbox&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;div/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-outerContainer&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;div/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-container&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;img/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-image&#039;&nbsp; &nbsp; &nbsp; }), $(&#039;&lt;div/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-nav&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;a/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-prev&#039;&nbsp; &nbsp; &nbsp; }), $(&#039;&lt;a/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-next&#039;&nbsp; &nbsp; &nbsp; })), $(&#039;&lt;div/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-loader&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;a/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-cancel&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;img/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; src: this.options.fileLoadingImage&nbsp; &nbsp; &nbsp; }))))), $(&#039;&lt;div/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-dataContainer&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;div/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-data&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;div/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-details&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;span/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-caption&#039;&nbsp; &nbsp; &nbsp; }), $(&#039;&lt;span/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-number&#039;&nbsp; &nbsp; &nbsp; })), $(&#039;&lt;div/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-closeContainer&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;a/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; &quot;class&quot;: &#039;lb-close&#039;&nbsp; &nbsp; &nbsp; }).append($(&#039;&lt;img/&gt;&#039;, {&nbsp; &nbsp; &nbsp; &nbsp; src: this.options.fileCloseImage&nbsp; &nbsp; &nbsp; }))))))).appendTo($(&#039;body&#039;));&nbsp; &nbsp; &nbsp; $(&#039;#lightboxOverlay&#039;).hide().on(&#039;click&#039;, function(e) {&nbsp; &nbsp; &nbsp; &nbsp; _this.end();&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; $lightbox = $(&#039;#lightbox&#039;);&nbsp; &nbsp; &nbsp; $lightbox.hide().on(&#039;click&#039;, function(e) {&nbsp; &nbsp; &nbsp; &nbsp; if ($(e.target).attr(&#039;id&#039;) === &#039;lightbox&#039;) _this.end();&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-outerContainer&#039;).on(&#039;click&#039;, function(e) {&nbsp; &nbsp; &nbsp; &nbsp; if ($(e.target).attr(&#039;id&#039;) === &#039;lightbox&#039;) _this.end();&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-prev&#039;).on(&#039;click&#039;, function(e) {&nbsp; &nbsp; &nbsp; &nbsp; _this.changeImage(_this.currentImageIndex - 1);&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-next&#039;).on(&#039;click&#039;, function(e) {&nbsp; &nbsp; &nbsp; &nbsp; _this.changeImage(_this.currentImageIndex + 1);&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-loader, .lb-close&#039;).on(&#039;click&#039;, function(e) {&nbsp; &nbsp; &nbsp; &nbsp; _this.end();&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.start = function($link) {&nbsp; &nbsp; &nbsp; var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;&nbsp; &nbsp; &nbsp; $(window).on(&quot;resize&quot;, this.sizeOverlay);&nbsp; &nbsp; &nbsp; $(&#039;select, object, embed&#039;).css({&nbsp; &nbsp; &nbsp; &nbsp; visibility: &quot;hidden&quot;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; $(&#039;#lightboxOverlay&#039;).width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);&nbsp; &nbsp; &nbsp; this.album = [];&nbsp; &nbsp; &nbsp; imageNumber = 0;&nbsp; &nbsp; &nbsp; if ($link.attr(&#039;rel&#039;) === &#039;lightbox&#039;) {&nbsp; &nbsp; &nbsp; &nbsp; this.album.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; link: $link.attr(&#039;href&#039;),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: $link.attr(&#039;title&#039;)&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; _ref = $($link.prop(&quot;tagName&quot;) + &#039;[rel=&quot;&#039; + $link.attr(&#039;rel&#039;) + &#039;&quot;]&#039;);&nbsp; &nbsp; &nbsp; &nbsp; for (i = 0, _len = _ref.length; i &lt; _len; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a = _ref[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.album.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; link: $(a).attr(&#039;href&#039;),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: $(a).attr(&#039;title&#039;)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(a).attr(&#039;href&#039;) === $link.attr(&#039;href&#039;)) imageNumber = i;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; $window = $(window);&nbsp; &nbsp; &nbsp; top = $window.scrollTop() + $window.height() / 10;&nbsp; &nbsp; &nbsp; left = $window.scrollLeft();&nbsp; &nbsp; &nbsp; $lightbox = $(&#039;#lightbox&#039;);&nbsp; &nbsp; &nbsp; $lightbox.css({&nbsp; &nbsp; &nbsp; &nbsp; top: top + &#039;px&#039;,&nbsp; &nbsp; &nbsp; &nbsp; left: left + &#039;px&#039;&nbsp; &nbsp; &nbsp; }).fadeIn(this.options.fadeDuration);&nbsp; &nbsp; &nbsp; this.changeImage(imageNumber);&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.changeImage = function(imageNumber) {&nbsp; &nbsp; &nbsp; var $image, $lightbox, preloader,&nbsp; &nbsp; &nbsp; &nbsp; _this = this;&nbsp; &nbsp; &nbsp; this.disableKeyboardNav();&nbsp; &nbsp; &nbsp; $lightbox = $(&#039;#lightbox&#039;);&nbsp; &nbsp; &nbsp; $image = $lightbox.find(&#039;.lb-image&#039;);&nbsp; &nbsp; &nbsp; this.sizeOverlay();&nbsp; &nbsp; &nbsp; $(&#039;#lightboxOverlay&#039;).fadeIn(this.options.fadeDuration);&nbsp; &nbsp; &nbsp; $(&#039;.loader&#039;).fadeIn(&#039;slow&#039;);&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption&#039;).hide();&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-outerContainer&#039;).addClass(&#039;animating&#039;);&nbsp; &nbsp; &nbsp; preloader = new Image;&nbsp; &nbsp; &nbsp; preloader.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; $image.attr(&#039;src&#039;, _this.album[imageNumber].link);&nbsp; &nbsp; &nbsp; &nbsp; $image.width = preloader.width;&nbsp; &nbsp; &nbsp; &nbsp; $image.height = preloader.height;&nbsp; &nbsp; &nbsp; &nbsp; return _this.sizeContainer(preloader.width, preloader.height);&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; preloader.src = this.album[imageNumber].link;&nbsp; &nbsp; &nbsp; this.currentImageIndex = imageNumber;&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.sizeOverlay = function() {&nbsp; &nbsp; &nbsp; return $(&#039;#lightboxOverlay&#039;).width($(document).width()).height($(document).height());&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {&nbsp; &nbsp; &nbsp; var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth,&nbsp; &nbsp; &nbsp; &nbsp; _this = this;&nbsp; &nbsp; &nbsp; $lightbox = $(&#039;#lightbox&#039;);&nbsp; &nbsp; &nbsp; $outerContainer = $lightbox.find(&#039;.lb-outerContainer&#039;);&nbsp; &nbsp; &nbsp; oldWidth = $outerContainer.outerWidth();&nbsp; &nbsp; &nbsp; oldHeight = $outerContainer.outerHeight();&nbsp; &nbsp; &nbsp; $container = $lightbox.find(&#039;.lb-container&#039;);&nbsp; &nbsp; &nbsp; containerTopPadding = parseInt($container.css(&#039;padding-top&#039;), 10);&nbsp; &nbsp; &nbsp; containerRightPadding = parseInt($container.css(&#039;padding-right&#039;), 10);&nbsp; &nbsp; &nbsp; containerBottomPadding = parseInt($container.css(&#039;padding-bottom&#039;), 10);&nbsp; &nbsp; &nbsp; containerLeftPadding = parseInt($container.css(&#039;padding-left&#039;), 10);&nbsp; &nbsp; &nbsp; newWidth = imageWidth + containerLeftPadding + containerRightPadding;&nbsp; &nbsp; &nbsp; newHeight = imageHeight + containerTopPadding + containerBottomPadding;&nbsp; &nbsp; &nbsp; if (newWidth !== oldWidth &amp;&amp; newHeight !== oldHeight) {&nbsp; &nbsp; &nbsp; &nbsp; $outerContainer.animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: newWidth,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: newHeight&nbsp; &nbsp; &nbsp; &nbsp; }, this.options.resizeDuration, &#039;swing&#039;);&nbsp; &nbsp; &nbsp; } else if (newWidth !== oldWidth) {&nbsp; &nbsp; &nbsp; &nbsp; $outerContainer.animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: newWidth&nbsp; &nbsp; &nbsp; &nbsp; }, this.options.resizeDuration, &#039;swing&#039;);&nbsp; &nbsp; &nbsp; } else if (newHeight !== oldHeight) {&nbsp; &nbsp; &nbsp; &nbsp; $outerContainer.animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: newHeight&nbsp; &nbsp; &nbsp; &nbsp; }, this.options.resizeDuration, &#039;swing&#039;);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-dataContainer&#039;).width(newWidth);&nbsp; &nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-prevLink&#039;).height(newHeight);&nbsp; &nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-nextLink&#039;).height(newHeight);&nbsp; &nbsp; &nbsp; &nbsp; _this.showImage();&nbsp; &nbsp; &nbsp; }, this.options.resizeDuration);&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.showImage = function() {&nbsp; &nbsp; &nbsp; var $lightbox;&nbsp; &nbsp; &nbsp; $lightbox = $(&#039;#lightbox&#039;);&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-loader&#039;).hide();&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-image&#039;).fadeIn(&#039;slow&#039;);&nbsp; &nbsp; &nbsp; this.updateNav();&nbsp; &nbsp; &nbsp; this.updateDetails();&nbsp; &nbsp; &nbsp; this.preloadNeighboringImages();&nbsp; &nbsp; &nbsp; this.enableKeyboardNav();&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.updateNav = function() {&nbsp; &nbsp; &nbsp; var $lightbox;&nbsp; &nbsp; &nbsp; $lightbox = $(&#039;#lightbox&#039;);&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-nav&#039;).show();&nbsp; &nbsp; &nbsp; if (this.currentImageIndex &gt; 0) $lightbox.find(&#039;.lb-prev&#039;).show();&nbsp; &nbsp; &nbsp; if (this.currentImageIndex &lt; this.album.length - 1) {&nbsp; &nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-next&#039;).show();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.updateDetails = function() {&nbsp; &nbsp; &nbsp; var $lightbox,&nbsp; &nbsp; &nbsp; &nbsp; _this = this;&nbsp; &nbsp; &nbsp; $lightbox = $(&#039;#lightbox&#039;);&nbsp; &nbsp; &nbsp; if (typeof this.album[this.currentImageIndex].title !== &#039;undefined&#039; &amp;&amp; this.album[this.currentImageIndex].title !== &quot;&quot;) {&nbsp; &nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-caption&#039;).html(this.album[this.currentImageIndex].title).fadeIn(&#039;fast&#039;);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if (this.album.length &gt; 1) {&nbsp; &nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-number&#039;).html(this.options.labelImage + &#039; &#039; + (this.currentImageIndex + 1) + &#039; &#039; + this.options.labelOf + &#039;&nbsp; &#039; + this.album.length).fadeIn(&#039;fast&#039;);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-number&#039;).hide();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-outerContainer&#039;).removeClass(&#039;animating&#039;);&nbsp; &nbsp; &nbsp; $lightbox.find(&#039;.lb-dataContainer&#039;).fadeIn(this.resizeDuration, function() {&nbsp; &nbsp; &nbsp; &nbsp; return _this.sizeOverlay();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.preloadNeighboringImages = function() {&nbsp; &nbsp; &nbsp; var preloadNext, preloadPrev;&nbsp; &nbsp; &nbsp; if (this.album.length &gt; this.currentImageIndex + 1) {&nbsp; &nbsp; &nbsp; &nbsp; preloadNext = new Image;&nbsp; &nbsp; &nbsp; &nbsp; preloadNext.src = this.album[this.currentImageIndex + 1].link;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if (this.currentImageIndex &gt; 0) {&nbsp; &nbsp; &nbsp; &nbsp; preloadPrev = new Image;&nbsp; &nbsp; &nbsp; &nbsp; preloadPrev.src = this.album[this.currentImageIndex - 1].link;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.enableKeyboardNav = function() {&nbsp; &nbsp; &nbsp; $(document).on(&#039;keyup.keyboard&#039;, $.proxy(this.keyboardAction, this));&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.disableKeyboardNav = function() {&nbsp; &nbsp; &nbsp; $(document).off(&#039;.keyboard&#039;);&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.keyboardAction = function(event) {&nbsp; &nbsp; &nbsp; var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;&nbsp; &nbsp; &nbsp; KEYCODE_ESC = 27;&nbsp; &nbsp; &nbsp; KEYCODE_LEFTARROW = 37;&nbsp; &nbsp; &nbsp; KEYCODE_RIGHTARROW = 39;&nbsp; &nbsp; &nbsp; keycode = event.keyCode;&nbsp; &nbsp; &nbsp; key = String.fromCharCode(keycode).toLowerCase();&nbsp; &nbsp; &nbsp; if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {&nbsp; &nbsp; &nbsp; &nbsp; this.end();&nbsp; &nbsp; &nbsp; } else if (key === &#039;p&#039; || keycode === KEYCODE_LEFTARROW) {&nbsp; &nbsp; &nbsp; &nbsp; if (this.currentImageIndex !== 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.changeImage(this.currentImageIndex - 1);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; } else if (key === &#039;n&#039; || keycode === KEYCODE_RIGHTARROW) {&nbsp; &nbsp; &nbsp; &nbsp; if (this.currentImageIndex !== this.album.length - 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.changeImage(this.currentImageIndex + 1);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; Lightbox.prototype.end = function() {&nbsp; &nbsp; &nbsp; this.disableKeyboardNav();&nbsp; &nbsp; &nbsp; $(window).off(&quot;resize&quot;, this.sizeOverlay);&nbsp; &nbsp; &nbsp; $(&#039;#lightbox&#039;).fadeOut(this.options.fadeDuration);&nbsp; &nbsp; &nbsp; $(&#039;#lightboxOverlay&#039;).fadeOut(this.options.fadeDuration);&nbsp; &nbsp; &nbsp; return $(&#039;select, object, embed&#039;).css({&nbsp; &nbsp; &nbsp; &nbsp; visibility: &quot;visible&quot;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };&nbsp; &nbsp; return Lightbox;&nbsp; })();&nbsp; $(function() {&nbsp; &nbsp; var lightbox, options;&nbsp; &nbsp; options = new LightboxOptions;&nbsp; &nbsp; return lightbox = new Lightbox(options);&nbsp; });}).call(this);&nbsp;[/PHP]&nbsp;&nbsp;-----------------------------&nbsp;[CODE]/* line 6, ../sass/lightbox.sass */#lightboxOverlay {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; z-index: 9999;&nbsp; background-color: black;&nbsp; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);&nbsp; opacity: 0.85;&nbsp; display: none;}/* line 15, ../sass/lightbox.sass */#lightbox {&nbsp; position: absolute;&nbsp; left: 0;&nbsp; width: 100%;&nbsp; z-index: 10000;&nbsp; text-align: center;&nbsp; line-height: 0;&nbsp; font-family: &quot;lucida grande&quot;, tahoma, verdana, arial, sans-serif;&nbsp; font-weight: normal;}/* line 24, ../sass/lightbox.sass */#lightbox img {&nbsp; width: auto;&nbsp; height: auto;}/* line 27, ../sass/lightbox.sass */#lightbox a img {&nbsp; border: none;}/* line 30, ../sass/lightbox.sass */.lb-outerContainer {&nbsp; position: relative;&nbsp; background-color: white;&nbsp; *zoom: 1;&nbsp; width: 250px;&nbsp; height: 250px;&nbsp; margin: 0 auto;&nbsp; -webkit-border-radius: 4px;&nbsp; -moz-border-radius: 4px;&nbsp; -ms-border-radius: 4px;&nbsp; -o-border-radius: 4px;&nbsp; border-radius: 4px;}/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */.lb-outerContainer:after {&nbsp; content: &quot;&quot;;&nbsp; display: table;&nbsp; clear: both;}/* line 39, ../sass/lightbox.sass */.lb-container {&nbsp; padding: 10px;}/* line 42, ../sass/lightbox.sass */.lb-loader {&nbsp; position: absolute;&nbsp; top: 40%;&nbsp; left: 0%;&nbsp; height: 25%;&nbsp; width: 100%;&nbsp; text-align: center;&nbsp; line-height: 0;}/* line 51, ../sass/lightbox.sass */.lb-nav {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; z-index: 10;}/* line 59, ../sass/lightbox.sass */.lb-container &gt; .nav {&nbsp; left: 0;}/* line 62, ../sass/lightbox.sass */.lb-nav a {&nbsp; outline: none;}/* line 65, ../sass/lightbox.sass */.lb-prev, .lb-next {&nbsp; width: 49%;&nbsp; height: 100%;&nbsp; background-image: url(&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot;);&nbsp; /* Trick IE into showing hover */&nbsp; display: block;}/* line 72, ../sass/lightbox.sass */.lb-prev {&nbsp; left: 0;&nbsp; float: left;}/* line 76, ../sass/lightbox.sass */.lb-next {&nbsp; right: 0;&nbsp; float: right;}/* line 81, ../sass/lightbox.sass */.lb-prev:hover {&nbsp; background: url(../images/prev.png) left 48% no-repeat;}/* line 85, ../sass/lightbox.sass */.lb-next:hover {&nbsp; background: url(../images/next.png) right 48% no-repeat;}/* line 88, ../sass/lightbox.sass */.lb-dataContainer {&nbsp; margin: 0 auto;&nbsp; padding-top: 5px;&nbsp; *zoom: 1;&nbsp; width: 100%;&nbsp; -moz-border-radius-bottomleft: 4px;&nbsp; -webkit-border-bottom-left-radius: 4px;&nbsp; -ms-border-bottom-left-radius: 4px;&nbsp; -o-border-bottom-left-radius: 4px;&nbsp; border-bottom-left-radius: 4px;&nbsp; -moz-border-radius-bottomright: 4px;&nbsp; -webkit-border-bottom-right-radius: 4px;&nbsp; -ms-border-bottom-right-radius: 4px;&nbsp; -o-border-bottom-right-radius: 4px;&nbsp; border-bottom-right-radius: 4px;}/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */.lb-dataContainer:after {&nbsp; content: &quot;&quot;;&nbsp; display: table;&nbsp; clear: both;}/* line 95, ../sass/lightbox.sass */.lb-data {&nbsp; padding: 0 10px;&nbsp; color: #ffffff;}/* line 98, ../sass/lightbox.sass */.lb-data .lb-details {&nbsp; width: 85%;&nbsp; float: left;&nbsp; text-align: left;&nbsp; line-height: 1.1em;}/* line 103, ../sass/lightbox.sass */.lb-data .lb-caption {&nbsp; font-size: 13px;&nbsp; font-weight: bold;&nbsp; line-height: 1em;}/* line 107, ../sass/lightbox.sass */.lb-data .lb-number {&nbsp; display: block;&nbsp; clear: left;&nbsp; padding-bottom: 1em;&nbsp; font-size: 11px;}/* line 112, ../sass/lightbox.sass */.lb-data .lb-close {&nbsp; width: 35px;&nbsp; float: right;&nbsp; padding-bottom: 0.7em;&nbsp; outline: none;}/* line 117, ../sass/lightbox.sass */.lb-data .lb-close:hover {&nbsp; cursor: pointer;}[/CODE]noch mein html eintrag&nbsp;&nbsp; &nbsp;&nbsp; [HTML]&lt;li&gt;&lt;a href=&quot;bilder/nachzuchten/schlangen/nachzucht1.jpg&quot; rel=&quot;lightbox[schlangennachzucht2011]&quot;&gt;&lt;img src=&quot;bilder/nachzuchten/schlangen/nachzuchtklein1.jpg&quot; title=&quot;Kornnattern&quot; /&gt;&lt;/a&gt;&lt;/li&gt;[/HTML]&nbsp;&nbsp;ich hoffe mir kann jemand helfen.&nbsp;PS bitte ganz einfach erklärenda ich noch nicht so viel erfahrung mit der ganzen sache haben</blockquote>

[QUOTE="ingalf, post: 2018209"] Hallo ich habe ein Problem ich habe auf meiner Homepage Lightbox eingebunden das geht soweit auch sehr gut aber leider bekomme ich den Tietel des Bildes nicht angezeigt. Ich habe auch schon bei google gesucht auch einges gefunden aber leider nichts was mir geholfen hat. hir meine css und meine js [PHP]/* Lightbox v2.51 by Lokesh Dhakar - http://www.lokeshdhakar.com For more information, visit: http://lokeshdhakar.com/projects/lightbox2/ Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ - free for use in both personal and commercial projects - attribution requires leaving author name, author link, and the license info intact Thanks - Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets. - Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05. Table of Contents ================= LightboxOptions Lightbox - constructor - init - enable - build - start - changeImage - sizeContainer - showImage - updateNav - updateDetails - preloadNeigbhoringImages - enableKeyboardNav - disableKeyboardNav - keyboardAction - end options = new LightboxOptions lightbox = new Lightbox options */ (function() { var $, Lightbox, LightboxOptions; $ = jQuery; LightboxOptions = (function() { function LightboxOptions() { this.fileLoadingImage = 'images/loading.gif'; this.fileCloseImage = 'images/close.png'; this.resizeDuration = 700; this.fadeDuration = 500; this.labelImage = "Bild"; this.labelOf = "von"; } return LightboxOptions; })(); Lightbox = (function() { function Lightbox(options) { this.options = options; this.album = []; this.currentImageIndex = void 0; this.init(); } Lightbox.prototype.init = function() { this.enable(); return this.build(); }; Lightbox.prototype.enable = function() { var _this = this; return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) { _this.start($(e.currentTarget)); return false; }); }; Lightbox.prototype.build = function() { var $lightbox, _this = this; $("<div>", { id: 'lightboxOverlay' }).after($('<div/>', { id: 'lightbox' }).append($('<div/>', { "class": 'lb-outerContainer' }).append($('<div/>', { "class": 'lb-container' }).append($('<img/>', { "class": 'lb-image' }), $('<div/>', { "class": 'lb-nav' }).append($('<a/>', { "class": 'lb-prev' }), $('<a/>', { "class": 'lb-next' })), $('<div/>', { "class": 'lb-loader' }).append($('<a/>', { "class": 'lb-cancel' }).append($('<img/>', { src: this.options.fileLoadingImage }))))), $('<div/>', { "class": 'lb-dataContainer' }).append($('<div/>', { "class": 'lb-data' }).append($('<div/>', { "class": 'lb-details' }).append($('', { "class": 'lb-caption' }), $('', { "class": 'lb-number' })), $('<div/>', { "class": 'lb-closeContainer' }).append($('<a/>', { "class": 'lb-close' }).append($('<img/>', { src: this.options.fileCloseImage }))))))).appendTo($('body')); $('#lightboxOverlay').hide().on('click', function(e) { _this.end(); return false; }); $lightbox = $('#lightbox'); $lightbox.hide().on('click', function(e) { if ($(e.target).attr('id') === 'lightbox') _this.end(); return false; }); $lightbox.find('.lb-outerContainer').on('click', function(e) { if ($(e.target).attr('id') === 'lightbox') _this.end(); return false; }); $lightbox.find('.lb-prev').on('click', function(e) { _this.changeImage(_this.currentImageIndex - 1); return false; }); $lightbox.find('.lb-next').on('click', function(e) { _this.changeImage(_this.currentImageIndex + 1); return false; }); $lightbox.find('.lb-loader, .lb-close').on('click', function(e) { _this.end(); return false; }); }; Lightbox.prototype.start = function($link) { var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref; $(window).on("resize", this.sizeOverlay); $('select, object, embed').css({ visibility: "hidden" }); $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration); this.album = []; imageNumber = 0; if ($link.attr('rel') === 'lightbox') { this.album.push({ link: $link.attr('href'), title: $link.attr('title') }); } else { _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]'); for (i = 0, _len = _ref.length; i < _len; i++) { a = _ref[i]; this.album.push({ link: $(a).attr('href'), title: $(a).attr('title') }); if ($(a).attr('href') === $link.attr('href')) imageNumber = i; } } $window = $(window); top = $window.scrollTop() + $window.height() / 10; left = $window.scrollLeft(); $lightbox = $('#lightbox'); $lightbox.css({ top: top + 'px', left: left + 'px' }).fadeIn(this.options.fadeDuration); this.changeImage(imageNumber); }; Lightbox.prototype.changeImage = function(imageNumber) { var $image, $lightbox, preloader, _this = this; this.disableKeyboardNav(); $lightbox = $('#lightbox'); $image = $lightbox.find('.lb-image'); this.sizeOverlay(); $('#lightboxOverlay').fadeIn(this.options.fadeDuration); $('.loader').fadeIn('slow'); $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); $lightbox.find('.lb-outerContainer').addClass('animating'); preloader = new Image; preloader.onload = function() { $image.attr('src', _this.album[imageNumber].link); $image.width = preloader.width; $image.height = preloader.height; return _this.sizeContainer(preloader.width, preloader.height); }; preloader.src = this.album[imageNumber].link; this.currentImageIndex = imageNumber; }; Lightbox.prototype.sizeOverlay = function() { return $('#lightboxOverlay').width($(document).width()).height($(document).height()); }; Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) { var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth, _this = this; $lightbox = $('#lightbox'); $outerContainer = $lightbox.find('.lb-outerContainer'); oldWidth = $outerContainer.outerWidth(); oldHeight = $outerContainer.outerHeight(); $container = $lightbox.find('.lb-container'); containerTopPadding = parseInt($container.css('padding-top'), 10); containerRightPadding = parseInt($container.css('padding-right'), 10); containerBottomPadding = parseInt($container.css('padding-bottom'), 10); containerLeftPadding = parseInt($container.css('padding-left'), 10); newWidth = imageWidth + containerLeftPadding + containerRightPadding; newHeight = imageHeight + containerTopPadding + containerBottomPadding; if (newWidth !== oldWidth && newHeight !== oldHeight) { $outerContainer.animate({ width: newWidth, height: newHeight }, this.options.resizeDuration, 'swing'); } else if (newWidth !== oldWidth) { $outerContainer.animate({ width: newWidth }, this.options.resizeDuration, 'swing'); } else if (newHeight !== oldHeight) { $outerContainer.animate({ height: newHeight }, this.options.resizeDuration, 'swing'); } setTimeout(function() { $lightbox.find('.lb-dataContainer').width(newWidth); $lightbox.find('.lb-prevLink').height(newHeight); $lightbox.find('.lb-nextLink').height(newHeight); _this.showImage(); }, this.options.resizeDuration); }; Lightbox.prototype.showImage = function() { var $lightbox; $lightbox = $('#lightbox'); $lightbox.find('.lb-loader').hide(); $lightbox.find('.lb-image').fadeIn('slow'); this.updateNav(); this.updateDetails(); this.preloadNeighboringImages(); this.enableKeyboardNav(); }; Lightbox.prototype.updateNav = function() { var $lightbox; $lightbox = $('#lightbox'); $lightbox.find('.lb-nav').show(); if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show(); if (this.currentImageIndex < this.album.length - 1) { $lightbox.find('.lb-next').show(); } }; Lightbox.prototype.updateDetails = function() { var $lightbox, _this = this; $lightbox = $('#lightbox'); if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") { $lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast'); } if (this.album.length > 1) { $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + ' ' + this.album.length).fadeIn('fast'); } else { $lightbox.find('.lb-number').hide(); } $lightbox.find('.lb-outerContainer').removeClass('animating'); $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() { return _this.sizeOverlay(); }); }; Lightbox.prototype.preloadNeighboringImages = function() { var preloadNext, preloadPrev; if (this.album.length > this.currentImageIndex + 1) { preloadNext = new Image; preloadNext.src = this.album[this.currentImageIndex + 1].link; } if (this.currentImageIndex > 0) { preloadPrev = new Image; preloadPrev.src = this.album[this.currentImageIndex - 1].link; } }; Lightbox.prototype.enableKeyboardNav = function() { $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this)); }; Lightbox.prototype.disableKeyboardNav = function() { $(document).off('.keyboard'); }; Lightbox.prototype.keyboardAction = function(event) { var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode; KEYCODE_ESC = 27; KEYCODE_LEFTARROW = 37; KEYCODE_RIGHTARROW = 39; keycode = event.keyCode; key = String.fromCharCode(keycode).toLowerCase(); if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) { this.end(); } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) { if (this.currentImageIndex !== 0) { this.changeImage(this.currentImageIndex - 1); } } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) { if (this.currentImageIndex !== this.album.length - 1) { this.changeImage(this.currentImageIndex + 1); } } }; Lightbox.prototype.end = function() { this.disableKeyboardNav(); $(window).off("resize", this.sizeOverlay); $('#lightbox').fadeOut(this.options.fadeDuration); $('#lightboxOverlay').fadeOut(this.options.fadeDuration); return $('select, object, embed').css({ visibility: "visible" }); }; return Lightbox; })(); $(function() { var lightbox, options; options = new LightboxOptions; return lightbox = new Lightbox(options); }); }).call(this); [/PHP] ----------------------------- [CODE]/* line 6, ../sass/lightbox.sass */ #lightboxOverlay { position: absolute; top: 0; left: 0; z-index: 9999; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); opacity: 0.85; display: none; } /* line 15, ../sass/lightbox.sass */ #lightbox { position: absolute; left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0; font-family: "lucida grande", tahoma, verdana, arial, sans-serif; font-weight: normal; } /* line 24, ../sass/lightbox.sass */ #lightbox img { width: auto; height: auto; } /* line 27, ../sass/lightbox.sass */ #lightbox a img { border: none; } /* line 30, ../sass/lightbox.sass */ .lb-outerContainer { position: relative; background-color: white; *zoom: 1; width: 250px; height: 250px; margin: 0 auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ .lb-outerContainer:after { content: ""; display: table; clear: both; } /* line 39, ../sass/lightbox.sass */ .lb-container { padding: 10px; } /* line 42, ../sass/lightbox.sass */ .lb-loader { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } /* line 51, ../sass/lightbox.sass */ .lb-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } /* line 59, ../sass/lightbox.sass */ .lb-container > .nav { left: 0; } /* line 62, ../sass/lightbox.sass */ .lb-nav a { outline: none; } /* line 65, ../sass/lightbox.sass */ .lb-prev, .lb-next { width: 49%; height: 100%; background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); /* Trick IE into showing hover */ display: block; } /* line 72, ../sass/lightbox.sass */ .lb-prev { left: 0; float: left; } /* line 76, ../sass/lightbox.sass */ .lb-next { right: 0; float: right; } /* line 81, ../sass/lightbox.sass */ .lb-prev:hover { background: url(../images/prev.png) left 48% no-repeat; } /* line 85, ../sass/lightbox.sass */ .lb-next:hover { background: url(../images/next.png) right 48% no-repeat; } /* line 88, ../sass/lightbox.sass */ .lb-dataContainer { margin: 0 auto; padding-top: 5px; *zoom: 1; width: 100%; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ .lb-dataContainer:after { content: ""; display: table; clear: both; } /* line 95, ../sass/lightbox.sass */ .lb-data { padding: 0 10px; color: #ffffff; } /* line 98, ../sass/lightbox.sass */ .lb-data .lb-details { width: 85%; float: left; text-align: left; line-height: 1.1em; } /* line 103, ../sass/lightbox.sass */ .lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1em; } /* line 107, ../sass/lightbox.sass */ .lb-data .lb-number { display: block; clear: left; padding-bottom: 1em; font-size: 11px; } /* line 112, ../sass/lightbox.sass */ .lb-data .lb-close { width: 35px; float: right; padding-bottom: 0.7em; outline: none; } /* line 117, ../sass/lightbox.sass */ .lb-data .lb-close:hover { cursor: pointer; }[/CODE] noch mein html eintrag [HTML]<li><a href="bilder/nachzuchten/schlangen/nachzucht1.jpg" rel="lightbox[schlangennachzucht2011]"><img src="bilder/nachzuchten/schlangen/nachzuchtklein1.jpg" title="Kornnattern" /></a></li>[/HTML] ich hoffe mir kann jemand helfen. PS bitte ganz einfach erklärenda ich noch nicht so viel erfahrung mit der ganzen sache haben [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?