Forum

Lightbox 2

Erstellt von Poki29, 08.09.2009.



  1. Poki29

    Poki29 Ps-ler ;-)

    Dabei seit:
    21.07.2009
    Beiträge:
    560
    Geschlecht:
    männlich
    Software:
    PS Cs3, Dremaweaver und viele mehr ;-)
    Kameratyp:
    Dimage A2
    Lightbox 2
    Ich denke mal jeder von euch Kennt die Lightbox 2. --> Lightbox 2

    Ich möchte jetzt, dass die Buttons Prev/Nect immer da sind. Sollte möglich sein, wenn man sich mti Java auskennt. Hat einer von euch ne Ahnung wie das geht?

    Hier nochmal das script:

    Code (Text):
    1.  
    2. // -----------------------------------------------------------------------------------
    3. //
    4. //    Lightbox v2.04
    5. //    by Lokesh Dhakar - http://www.lokeshdhakar.com
    6. //    Last Modification: 2/9/08
    7. //
    8. //    For more information, visit:
    9. //    http://lokeshdhakar.com/projects/lightbox2/
    10. //
    11. //    Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
    12. //      - Free for use in both personal and commercial projects
    13. //        - Attribution requires leaving author name, author link, and the license info intact.
    14. //    
    15. //  Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
    16. //          Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
    17. //
    18. // -----------------------------------------------------------------------------------
    19. /*
    20.  
    21.     Table of Contents
    22.     -----------------
    23.     Configuration
    24.  
    25.     Lightbox Class Declaration
    26.     - initialize()
    27.     - updateImageList()
    28.     - start()
    29.     - changeImage()
    30.     - resizeImageContainer()
    31.     - showImage()
    32.     - updateDetails()
    33.     - updateNav()
    34.     - enableKeyboardNav()
    35.     - disableKeyboardNav()
    36.     - keyboardAction()
    37.     - preloadNeighborImages()
    38.     - end()
    39.    
    40.     Function Calls
    41.     - document.observe()
    42.    
    43. */
    44. // -----------------------------------------------------------------------------------
    45.  
    46. //
    47. //  Configurationl
    48. //
    49. LightboxOptions = Object.extend({
    50.     fileLoadingImage:        'images/loading.gif',    
    51.     fileBottomNavCloseImage: 'images/closelabel.gif',
    52.  
    53.     overlayOpacity: 0.8,   // controls transparency of shadow overlay
    54.  
    55.     animate: true,         // toggles resizing animations
    56.     resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)
    57.  
    58.     borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable
    59.  
    60.     // When grouping images this is used to write: Image # of #.
    61.     // Change it for non-english localization
    62.     labelImage: "Bild",
    63.     labelOf: "von"
    64. }, window.LightboxOptions || {});
    65.  
    66. // -----------------------------------------------------------------------------------
    67.  
    68. var Lightbox = Class.create();
    69.  
    70. Lightbox.prototype = {
    71.     imageArray: [],
    72.     activeImage: undefined,
    73.    
    74.     // initialize()
    75.     // Constructor runs on completion of the DOM loading. Calls updateImageList and then
    76.     // the function inserts html at the bottom of the page which is used to display the shadow
    77.     // overlay and the image container.
    78.     //
    79.     initialize: function() {    
    80.        
    81.         this.updateImageList();
    82.        
    83.         this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
    84.  
    85.         if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
    86.         if (LightboxOptions.resizeSpeed < 1)  LightboxOptions.resizeSpeed = 1;
    87.  
    88.         this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
    89.         this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;  // shadow fade in/out duration
    90.  
    91.         // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
    92.         // If animations are turned off, it will be hidden as to prevent a flicker of a
    93.         // white 250 by 250 box.
    94.         var size = (LightboxOptions.animate ? 250 : 1) + 'px';
    95.        
    96.  
    97.         // Code inserts html at the bottom of the page that looks similar to this:
    98.         //
    99.         //  <div id="overlay"></div>
    100.         //  <div id="lightbox">
    101.         //      <div id="outerImageContainer">
    102.         //          <div id="imageContainer">
    103.         //              <img id="lightboxImage">
    104.         //              <div style="" id="hoverNav">
    105.         //                  <a href="#" id="prevLink"></a>
    106.         //                  <a href="#" id="nextLink"></a>
    107.         //              </div>
    108.         //              <div id="loading">
    109.         //                  <a href="#" id="loadingLink">
    110.         //                      <img src="images/loading.gif">
    111.         //                  </a>
    112.         //              </div>
    113.         //          </div>
    114.         //      </div>
    115.         //      <div id="imageDataContainer">
    116.         //          <div id="imageData">
    117.         //              <div id="imageDetails">
    118.         //                  <span id="caption"></span>
    119.         //                  <span id="numberDisplay"></span>
    120.         //              </div>
    121.         //              <div id="bottomNav">
    122.         //                  <a href="#" id="bottomNavClose">
    123.         //                      <img src="images/close.gif">
    124.         //                  </a>
    125.         //              </div>
    126.         //          </div>
    127.         //      </div>
    128.         //  </div>
    129.  
    130.  
    131.         var objBody = $$('body')[0];
    132.  
    133.         objBody.appendChild(Builder.node('div',{id:'overlay'}));
    134.    
    135.         objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
    136.             Builder.node('div',{id:'outerImageContainer'},
    137.                 Builder.node('div',{id:'imageContainer'}, [
    138.                     Builder.node('img',{id:'lightboxImage'}),
    139.                     Builder.node('div',{id:'hoverNav'}, [
    140.                         Builder.node('a',{id:'prevLink', href: '#' }),
    141.                         Builder.node('a',{id:'nextLink', href: '#' })
    142.                     ]),
    143.                     Builder.node('div',{id:'loading'},
    144.                         Builder.node('a',{id:'loadingLink', href: '#' },
    145.                             Builder.node('img', {src: LightboxOptions.fileLoadingImage})
    146.                         )
    147.                     )
    148.                 ])
    149.             ),
    150.             Builder.node('div', {id:'imageDataContainer'},
    151.                 Builder.node('div',{id:'imageData'}, [
    152.                     Builder.node('div',{id:'imageDetails'}, [
    153.                         Builder.node('span',{id:'caption'}),
    154.                         Builder.node('span',{id:'numberDisplay'})
    155.                     ]),
    156.                     Builder.node('div',{id:'bottomNav'},
    157.                         Builder.node('a',{id:'bottomNavClose', href: '#' },
    158.                             Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
    159.                         )
    160.                     )
    161.                 ])
    162.             )
    163.         ]));
    164.  
    165.  
    166.         $('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
    167.         $('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
    168.         $('outerImageContainer').setStyle({ width: size, height: size });
    169.         $('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
    170.         $('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
    171.         $('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
    172.         $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
    173.  
    174.         var th = this;
    175.         (function(){
    176.             var ids =
    177.                 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
    178.                 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';  
    179.             $w(ids).each(function(id){ th[id] = $(id); });
    180.         }).defer();
    181.     },
    182.  
    183.     //
    184.     // updateImageList()
    185.     // Loops through anchor tags looking for 'lightbox' references and applies onclick
    186.     // events to appropriate links. You can rerun after dynamically adding images w/ajax.
    187.     //
    188.     updateImageList: function() {  
    189.         this.updateImageList = Prototype.emptyFunction;
    190.  
    191.         document.observe('click', (function(event){
    192.             var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
    193.             if (target) {
    194.                 event.stop();
    195.                 this.start(target);
    196.             }
    197.         }).bind(this));
    198.     },
    199.    
    200.     //
    201.     //  start()
    202.     //  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
    203.     //
    204.     start: function(imageLink) {    
    205.  
    206.         $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
    207.  
    208.         // stretch overlay to fill page and fade in
    209.         var arrayPageSize = this.getPageSize();
    210.         $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
    211.  
    212.         new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
    213.  
    214.         this.imageArray = [];
    215.         var imageNum = 0;      
    216.  
    217.         if ((imageLink.rel == 'lightbox')){
    218.             // if image is NOT part of a set, add single image to imageArray
    219.             this.imageArray.push([imageLink.href, imageLink.title]);        
    220.         } else {
    221.             // if image is part of a set..
    222.             this.imageArray =
    223.                 $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
    224.                 collect(function(anchor){ return [anchor.href, anchor.title]; }).
    225.                 uniq();
    226.            
    227.             while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
    228.         }
    229.  
    230.         // calculate top and left offset for the lightbox
    231.         var arrayPageScroll = document.viewport.getScrollOffsets();
    232.         var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
    233.         var lightboxLeft = arrayPageScroll[0];
    234.         this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
    235.        
    236.         this.changeImage(imageNum);
    237.     },
    238.  
    239.     //
    240.     //  changeImage()
    241.     //  Hide most elements and preload image in preparation for resizing image container.
    242.     //
    243.     changeImage: function(imageNum) {  
    244.        
    245.         this.activeImage = imageNum; // update global var
    246.  
    247.         // hide elements during transition
    248.         if (LightboxOptions.animate) this.loading.show();
    249.         this.lightboxImage.hide();
    250.         this.hoverNav.hide();
    251.         this.prevLink.hide();
    252.         this.nextLink.hide();
    253.         // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
    254.         this.imageDataContainer.setStyle({opacity: .0001});
    255.         this.numberDisplay.hide();      
    256.        
    257.         var imgPreloader = new Image();
    258.        
    259.         // once image is preloaded, resize image container
    260.  
    261.  
    262.         imgPreloader.onload = (function(){
    263.             this.lightboxImage.src = this.imageArray[this.activeImage][0];
    264.             this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
    265.         }).bind(this);
    266.         imgPreloader.src = this.imageArray[this.activeImage][0];
    267.     },
    268.  
    269.     //
    270.     //  resizeImageContainer()
    271.     //
    272.     resizeImageContainer: function(imgWidth, imgHeight) {
    273.  
    274.         // get current width and height
    275.         var widthCurrent  = this.outerImageContainer.getWidth();
    276.         var heightCurrent = this.outerImageContainer.getHeight();
    277.  
    278.         // get new width and height
    279.         var widthNew  = (imgWidth  + LightboxOptions.borderSize * 2);
    280.         var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
    281.  
    282.         // scalars based on change from old to new
    283.         var xScale = (widthNew  / widthCurrent)  * 100;
    284.         var yScale = (heightNew / heightCurrent) * 100;
    285.  
    286.         // calculate size difference between new and old image, and resize if necessary
    287.         var wDiff = widthCurrent - widthNew;
    288.         var hDiff = heightCurrent - heightNew;
    289.  
    290.         if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
    291.         if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
    292.  
    293.         // if new and old image are same size and no scaling transition is necessary,
    294.         // do a quick pause to prevent image flicker.
    295.         var timeout = 0;
    296.         if ((hDiff == 0) && (wDiff == 0)){
    297.             timeout = 100;
    298.             if (Prototype.Browser.IE) timeout = 250;  
    299.         }
    300.  
    301.         (function(){
    302.             this.prevLink.setStyle({ height: imgHeight + 'px' });
    303.             this.nextLink.setStyle({ height: imgHeight + 'px' });
    304.             this.imageDataContainer.setStyle({ width: widthNew + 'px' });
    305.  
    306.             this.showImage();
    307.         }).bind(this).delay(timeout / 1000);
    308.     },
    309.    
    310.     //
    311.     //  showImage()
    312.     //  Display image and begin preloading neighbors.
    313.     //
    314.     showImage: function(){
    315.         this.loading.hide();
    316.         new Effect.Appear(this.lightboxImage, {
    317.             duration: this.resizeDuration,
    318.             queue: 'end',
    319.             afterFinish: (function(){ this.updateDetails(); }).bind(this)
    320.         });
    321.         this.preloadNeighborImages();
    322.     },
    323.  
    324.     //
    325.     //  updateDetails()
    326.     //  Display caption, image number, and bottom nav.
    327.     //
    328.     updateDetails: function() {
    329.    
    330.         // if caption is not null
    331.         if (this.imageArray[this.activeImage][1] != ""){
    332.             this.caption.update(this.imageArray[this.activeImage][1]).show();
    333.         }
    334.        
    335.         // if image is part of set display 'Image x of x'
    336.         if (this.imageArray.length > 1){
    337.             this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length).show();
    338.         }
    339.  
    340.         new Effect.Parallel(
    341.             [
    342.                 new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
    343.                 new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
    344.             ],
    345.             {
    346.                 duration: this.resizeDuration,
    347.                 afterFinish: (function() {
    348.                     // update overlay size and update nav
    349.                     var arrayPageSize = this.getPageSize();
    350.                     this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
    351.                     this.updateNav();
    352.                 }).bind(this)
    353.             }
    354.         );
    355.     },
    356.  
    357.     //
    358.     //  updateNav()
    359.     //  Display appropriate previous and next hover navigation.
    360.     //
    361.     updateNav: function() {
    362.  
    363.         this.hoverNav.show();              
    364.  
    365.         // if not first image in set, display prev image button
    366.         if (this.activeImage > 0) this.prevLink.show();
    367.  
    368.         // if not last image in set, display next image button
    369.         if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
    370.        
    371.         this.enableKeyboardNav();
    372.     },
    373.  
    374.     //
    375.     //  enableKeyboardNav()
    376.     //
    377.     enableKeyboardNav: function() {
    378.         document.observe('keydown', this.keyboardAction);
    379.     },
    380.  
    381.     //
    382.     //  disableKeyboardNav()
    383.     //
    384.     disableKeyboardNav: function() {
    385.         document.stopObserving('keydown', this.keyboardAction);
    386.     },
    387.  
    388.     //
    389.     //  keyboardAction()
    390.     //
    391.     keyboardAction: function(event) {
    392.         var keycode = event.keyCode;
    393.  
    394.         var escapeKey;
    395.         if (event.DOM_VK_ESCAPE) {  // mozilla
    396.             escapeKey = event.DOM_VK_ESCAPE;
    397.         } else { // ie
    398.             escapeKey = 27;
    399.         }
    400.  
    401.         var key = String.fromCharCode(keycode).toLowerCase();
    402.        
    403.         if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
    404.             this.end();
    405.         } else if ((key == 'p') || (keycode == 37)){ // display previous image
    406.             if (this.activeImage != 0){
    407.                 this.disableKeyboardNav();
    408.                 this.changeImage(this.activeImage - 1);
    409.             }
    410.         } else if ((key == 'n') || (keycode == 39)){ // display next image
    411.             if (this.activeImage != (this.imageArray.length - 1)){
    412.                 this.disableKeyboardNav();
    413.                 this.changeImage(this.activeImage + 1);
    414.             }
    415.         }
    416.     },
    417.  
    418.     //
    419.     //  preloadNeighborImages()
    420.     //  Preload previous and next images.
    421.     //
    422.     preloadNeighborImages: function(){
    423.         var preloadNextImage, preloadPrevImage;
    424.         if (this.imageArray.length > this.activeImage + 1){
    425.             preloadNextImage = new Image();
    426.             preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
    427.         }
    428.         if (this.activeImage > 0){
    429.             preloadPrevImage = new Image();
    430.             preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
    431.         }
    432.    
    433.     },
    434.  
    435.     //
    436.     //  end()
    437.     //
    438.     end: function() {
    439.         this.disableKeyboardNav();
    440.         this.lightbox.hide();
    441.         new Effect.Fade(this.overlay, { duration: this.overlayDuration });
    442.         $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
    443.     },
    444.  
    445.     //
    446.     //  getPageSize()
    447.     //
    448.     getPageSize: function() {
    449.            
    450.          var xScroll, yScroll;
    451.        
    452.         if (window.innerHeight && window.scrollMaxY) {    
    453.             xScroll = window.innerWidth + window.scrollMaxX;
    454.             yScroll = window.innerHeight + window.scrollMaxY;
    455.         } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    456.             xScroll = document.body.scrollWidth;
    457.             yScroll = document.body.scrollHeight;
    458.         } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    459.             xScroll = document.body.offsetWidth;
    460.             yScroll = document.body.offsetHeight;
    461.         }
    462.        
    463.         var windowWidth, windowHeight;
    464.        
    465.         if (self.innerHeight) {    // all except Explorer
    466.             if(document.documentElement.clientWidth){
    467.                 windowWidth = document.documentElement.clientWidth;
    468.             } else {
    469.                 windowWidth = self.innerWidth;
    470.             }
    471.             windowHeight = self.innerHeight;
    472.         } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    473.             windowWidth = document.documentElement.clientWidth;
    474.             windowHeight = document.documentElement.clientHeight;
    475.         } else if (document.body) { // other Explorers
    476.             windowWidth = document.body.clientWidth;
    477.             windowHeight = document.body.clientHeight;
    478.         }    
    479.        
    480.         // for small pages with total height less then height of the viewport
    481.         if(yScroll < windowHeight){
    482.             pageHeight = windowHeight;
    483.         } else {
    484.             pageHeight = yScroll;
    485.         }
    486.    
    487.         // for small pages with total width less then width of the viewport
    488.         if(xScroll < windowWidth){    
    489.             pageWidth = xScroll;        
    490.         } else {
    491.             pageWidth = windowWidth;
    492.         }
    493.  
    494.         return [pageWidth,pageHeight];
    495.     }
    496. }
    497.  
    498. document.observe('dom:loaded', function () { new Lightbox(); });
     
    #1      
  2. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    Lightbox 2
    AW: Lightbox 2

    Ich meine dafür braucht man nicht einmal JavaScript!-Kenntnisse. Das kannst du in der, meine ich, auch in der CSS (lightbox.css) einstellen.
     
    #2      
  3. Rakete

    Rakete Nicht mehr ganz neu hier

    Dabei seit:
    05.04.2007
    Beiträge:
    66
    Geschlecht:
    männlich
    Lightbox 2
    AW: Lightbox 2

    Um die Buttons zu verstecken, wird die "hide" Funktion in prototype.js verwendet. Du kannst also entweder alle hide Aufrufe in der lightbox.js ändern oder die hide Funktion selbst verändern, z.B. die Zeile auskommentieren in die Display-Eigenschaft auf 'none' gesetzt wird (dann verschwinden aber auch alle anderen Elemente nicht mehr, die eigentlich ausgeblendet werden bzw. können).

    Es kann sein, dass du damit gegen die Lizenzbestimmungen des einen oder des anderen Skriptes verstösst!!!
     
    #3      
  4. Poki29

    Poki29 Ps-ler ;-)

    Dabei seit:
    21.07.2009
    Beiträge:
    560
    Geschlecht:
    männlich
    Software:
    PS Cs3, Dremaweaver und viele mehr ;-)
    Kameratyp:
    Dimage A2
    Lightbox 2
    Ich werde mich mal über die Lizenz informieren, aber ich mag den Hidekram eh nicht ;-)

    Ich habe mich etwas informiert aber nichts gefunden. Weiß jemand ob ich die js. Scripte verändern darf? Über Css geht es glaub ich nicht, zumindest wüsste ich nicht wie.

    Mehr als das konnte ich nicht finden und das sagt ja nur aus dass mann diese Dinge nicht entfernen darf.

    - Attribution requires leaving author name, author link, and the license info intact.
     
    Zuletzt von einem Moderator bearbeitet: 08.09.2009
    #4      
  5. mros

    mros Nicht mehr ganz neu hier

    Dabei seit:
    21.04.2009
    Beiträge:
    75
    Geschlecht:
    männlich
    Ort:
    Duisburg
    Software:
    Gimp / Corel / Inkscape
    Kameratyp:
    Canon EOS 1000D
    Lightbox 2
    #5      
Die Seite wird geladen...
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×