suche folgendes Script

Dieses Thema im Forum "Webentwicklung" wurde erstellt von pizZa, 16. August 2006 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 16. August 2006
    high jungs,

    ich hab so ne site gefunden wo einer seine naja" designs" vorstellt, der hat in seiner gallery seine werke und wenn ich auf des werk klicke, digiworx.ch V1 oder so, öffnet sich so n popup, ich glaub des is javascript bin mir aber nicht sicher...

    hier zu sehen

    ich glaub es is flash, aber nirgends, finde ich ne flash datei, die des hervorruft...oder kennt jemand sowas dergleichen ?
    geht des auch mit javascript ?

    wenn jemand des script hat oder so, wäre ich diesem sehr dankbar , habs nämlich auch nich im quelltext gefunden...

    bräuchte des nämlich dirngend

    greetZz

    pizZa
     
  2. 16. August 2006
    so ich habe das mal unter die lupe genommen und bin auf folgendem script gelandet:

    Code:
    // -----------------------------------------------------------------------------------
    //
    // Lightbox v2.02
    // by Lokesh Dhakar - http://www.huddletogether.com
    // 3/31/06
    //
    // For more information on this script, visit:
    // http://huddletogether.com/projects/lightbox2/
    //
    // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
    // 
    // Credit also due to those who have helped, inspired, and made their code available to the public.
    // Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
    //
    //
    // -----------------------------------------------------------------------------------
    /*
    
     Table of Contents
     -----------------
     Configuration
     Global Variables
    
     Extending Built-in Objects 
     - Object.extend(Element)
     - Array.prototype.removeDuplicates()
     - Array.prototype.empty()
    
     Lightbox Class Declaration
     - initialize()
     - start()
     - changeImage()
     - resizeImageContainer()
     - showImage()
     - updateDetails()
     - updateNav()
     - enableKeyboardNav()
     - disableKeyboardNav()
     - keyboardAction()
     - preloadNeighborImages()
     - end()
     
     Miscellaneous Functions
     - getPageScroll()
     - getPageSize()
     - getKey()
     - listenKey()
     - showSelectBoxes()
     - hideSelectBoxes()
     - pause()
     - initLightbox()
     
     Function Calls
     - addLoadEvent(initLightbox)
     
    */
    // -----------------------------------------------------------------------------------
    
    //
    // Configuration
    //
    var fileLoadingImage = "mambots/content/multithumb/lightbox/images/loading.gif"; 
    var fileBottomNavCloseImage = "mambots/content/multithumb/lightbox/images/closelabel.gif";
    
    var resizeSpeed = 7; // controls the speed of the image resizing (1=slowest and 10=fastest)
    
    var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
    
    // -----------------------------------------------------------------------------------
    
    //
    // Global Variables
    //
    var imageArray = new Array;
    var activeImage;
    
    if(resizeSpeed > 10){ resizeSpeed = 10;}
    if(resizeSpeed < 1){ resizeSpeed = 1;}
    resizeDuration = (11 - resizeSpeed) * 0.15;
    
    // -----------------------------------------------------------------------------------
    
    //
    // Additional methods for Element added by SU, Couloir
    // - further additions by Lokesh Dhakar (huddletogether.com)
    //
    Object.extend(Element, {
     getWidth: function(element) {
     element = $(element);
     return element.offsetWidth; 
     },
     setWidth: function(element,w) {
     element = $(element);
     element.style.width = w +"px";
     },
     setHeight: function(element,h) {
     element = $(element);
     element.style.height = h +"px";
     },
     setTop: function(element,t) {
     element = $(element);
     element.style.top = t +"px";
     },
     setSrc: function(element,src) {
     element = $(element);
     element.src = src; 
     },
     setHref: function(element,href) {
     element = $(element);
     element.href = href; 
     },
     setInnerHTML: function(element,content) {
     element = $(element);
     element.innerHTML = content;
     }
    });
    
    // -----------------------------------------------------------------------------------
    
    //
    // Extending built-in Array object
    // - array.removeDuplicates()
    // - array.empty()
    //
    Array.prototype.removeDuplicates = function () {
     for(i = 1; i < this.length; i++){
     if(this[i][0] == this[i-1][0]){
     this.splice(i,1);
     }
     }
    }
    
    // -----------------------------------------------------------------------------------
    
    Array.prototype.empty = function () {
     for(i = 0; i <= this.length; i++){
     this.shift();
     }
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // Lightbox Class Declaration
    // - initialize()
    // - start()
    // - changeImage()
    // - resizeImageContainer()
    // - showImage()
    // - updateDetails()
    // - updateNav()
    // - enableKeyboardNav()
    // - disableKeyboardNav()
    // - keyboardNavAction()
    // - preloadNeighborImages()
    // - end()
    //
    // Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
    //
    var Lightbox = Class.create();
    
    Lightbox.prototype = {
     
     // initialize()
     // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for 
     // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
     // the function inserts html at the bottom of the page which is used to display the shadow 
     // overlay and the image container.
     //
     initialize: function() { 
     if (!document.getElementsByTagName){ return; }
     var anchors = document.getElementsByTagName('a');
    
     // loop through all anchor tags
     for (var i=0; i<anchors.length; i++){
     var anchor = anchors[i];
     
     var relAttribute = String(anchor.getAttribute('rel'));
     
     // use the string.match() method to catch 'lightbox' references in the rel attribute
     if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
     anchor.onclick = function () {myLightbox.start(this); return false;}
     }
     }
    
     // The rest of this code inserts html at the bottom of the page that looks similar to this:
     //
     // <div id="overlay"></div>
     // <div id="lightbox">
     // <div id="outerImageContainer">
     // <div id="imageContainer">
     // <img id="lightboxImage">
     // <div style="" id="hoverNav">
     // <a href="#" id="prevLink"></a>
     // <a href="#" id="nextLink"></a>
     // </div>
     // <div id="loading">
     // <a href="#" id="loadingLink">
     // <img src="images/loading.gif">
     // </a>
     // </div>
     // </div>
     // </div>
     // <div id="imageDataContainer">
     // <div id="imageData">
     // <div id="imageDetails">
     // <span id="caption"></span>
     // <span id="numberDisplay"></span>
     // </div>
     // <div id="bottomNav">
     // <a href="#" id="bottomNavClose">
     // <img src="images/close.gif">
     // </a>
     // </div>
     // </div>
     // </div>
     // </div>
    
    
     var objBody = document.getElementsByTagName("body").item(0);
     
     var objOverlay = document.createElement("div");
     objOverlay.setAttribute('id','overlay');
     objOverlay.style.display = 'none';
     objOverlay.onclick = function() { myLightbox.end(); return false; }
     objBody.appendChild(objOverlay);
     
     var objLightbox = document.createElement("div");
     objLightbox.setAttribute('id','lightbox');
     objLightbox.style.display = 'none';
     objBody.appendChild(objLightbox);
     
     var objOuterImageContainer = document.createElement("div");
     objOuterImageContainer.setAttribute('id','outerImageContainer');
     objLightbox.appendChild(objOuterImageContainer);
    
     var objImageContainer = document.createElement("div");
     objImageContainer.setAttribute('id','imageContainer');
     objOuterImageContainer.appendChild(objImageContainer);
     
     var objLightboxImage = document.createElement("img");
     objLightboxImage.setAttribute('id','lightboxImage');
     objImageContainer.appendChild(objLightboxImage);
     
     var objHoverNav = document.createElement("div");
     objHoverNav.setAttribute('id','hoverNav');
     objImageContainer.appendChild(objHoverNav);
     
     var objPrevLink = document.createElement("a");
     objPrevLink.setAttribute('id','prevLink');
     objPrevLink.setAttribute('href','#');
     objHoverNav.appendChild(objPrevLink);
     
     var objNextLink = document.createElement("a");
     objNextLink.setAttribute('id','nextLink');
     objNextLink.setAttribute('href','#');
     objHoverNav.appendChild(objNextLink);
     
     var objLoading = document.createElement("div");
     objLoading.setAttribute('id','loading');
     objImageContainer.appendChild(objLoading);
     
     var objLoadingLink = document.createElement("a");
     objLoadingLink.setAttribute('id','loadingLink');
     objLoadingLink.setAttribute('href','#');
     objLoadingLink.onclick = function() { myLightbox.end(); return false; }
     objLoading.appendChild(objLoadingLink);
     
     var objLoadingImage = document.createElement("img");
     objLoadingImage.setAttribute('src', fileLoadingImage);
     objLoadingLink.appendChild(objLoadingImage);
    
     var objImageDataContainer = document.createElement("div");
     objImageDataContainer.setAttribute('id','imageDataContainer');
     objImageDataContainer.className = 'clearfix';
     objLightbox.appendChild(objImageDataContainer);
    
     var objImageData = document.createElement("div");
     objImageData.setAttribute('id','imageData');
     objImageDataContainer.appendChild(objImageData);
     
     var objImageDetails = document.createElement("div");
     objImageDetails.setAttribute('id','imageDetails');
     objImageData.appendChild(objImageDetails);
     
     var objCaption = document.createElement("span");
     objCaption.setAttribute('id','caption');
     objImageDetails.appendChild(objCaption);
     
     var objNumberDisplay = document.createElement("span");
     objNumberDisplay.setAttribute('id','numberDisplay');
     objImageDetails.appendChild(objNumberDisplay);
     
     var objBottomNav = document.createElement("div");
     objBottomNav.setAttribute('id','bottomNav');
     objImageData.appendChild(objBottomNav);
     
     var objBottomNavCloseLink = document.createElement("a");
     objBottomNavCloseLink.setAttribute('id','bottomNavClose');
     objBottomNavCloseLink.setAttribute('href','#');
     objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
     objBottomNav.appendChild(objBottomNavCloseLink);
     
     var objBottomNavCloseImage = document.createElement("img");
     objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
     objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
     },
     
     //
     // start()
     // Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
     //
     start: function(imageLink) { 
    
     hideSelectBoxes();
    
     // stretch overlay to fill page and fade in
     var arrayPageSize = getPageSize();
     Element.setHeight('overlay', arrayPageSize[1]);
     new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
    
     imageArray = [];
     imageNum = 0; 
    
     if (!document.getElementsByTagName){ return; }
     var anchors = document.getElementsByTagName('a');
    
     // if image is NOT part of a set..
     if((imageLink.getAttribute('rel') == 'lightbox')){
     // add single image to imageArray
     imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'))); 
     } else {
     // if image is part of a set..
    
     // loop through anchors, find other images in set, and add them to imageArray
     for (var i=0; i<anchors.length; i++){
     var anchor = anchors[i];
     if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
     imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
     }
     }
     imageArray.removeDuplicates();
     while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
     }
    
     // calculate top offset for the lightbox and display 
     var arrayPageSize = getPageSize();
     var arrayPageScroll = getPageScroll();
     var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
    
     Element.setTop('lightbox', lightboxTop);
     Element.show('lightbox');
     
     this.changeImage(imageNum);
     },
    
     //
     // changeImage()
     // Hide most elements and preload image in preparation for resizing image container.
     //
     changeImage: function(imageNum) { 
     
     activeImage = imageNum; // update global var
    
     // hide elements during transition
     Element.show('loading');
     Element.hide('lightboxImage');
     Element.hide('hoverNav');
     Element.hide('prevLink');
     Element.hide('nextLink');
     Element.hide('imageDataContainer');
     Element.hide('numberDisplay'); 
     
     imgPreloader = new Image();
     
     // once image is preloaded, resize image container
     imgPreloader.onload=function(){
     Element.setSrc('lightboxImage', imageArray[activeImage][0]);
     myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
     }
     imgPreloader.src = imageArray[activeImage][0];
     },
    
     //
     // resizeImageContainer()
     //
     resizeImageContainer: function( imgWidth, imgHeight) {
    
     // get current height and width
     this.wCur = Element.getWidth('outerImageContainer');
     this.hCur = Element.getHeight('outerImageContainer');
    
     // scalars based on change from old to new
     this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100;
     this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100;
    
     // calculate size difference between new and old image, and resize if necessary
     wDiff = (this.wCur - borderSize * 2) - imgWidth;
     hDiff = (this.hCur - borderSize * 2) - imgHeight;
    
     if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
     if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
    
     // if new and old image are same size and no scaling transition is necessary, 
     // do a quick pause to prevent image flicker.
     if((hDiff == 0) && (wDiff == 0)){
     if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
     }
    
     Element.setHeight('prevLink', imgHeight);
     Element.setHeight('nextLink', imgHeight);
     Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));
    
     this.showImage();
     },
     
     //
     // showImage()
     // Display image and begin preloading neighbors.
     //
     showImage: function(){
     Element.hide('loading');
     new Effect.Appear('lightboxImage', { duration: 0.5, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });
     this.preloadNeighborImages();
     },
    
     //
     // updateDetails()
     // Display caption, image number, and bottom nav.
     //
     updateDetails: function() {
     
     Element.show('caption');
     Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
     
     // if image is part of set display 'Image x of x' 
     if(imageArray.length > 1){
     Element.show('numberDisplay');
     Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
     }
    
     new Effect.Parallel(
     [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }), 
     new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ], 
     { duration: 0.65, afterFinish: function() { myLightbox.updateNav();} } 
     );
     },
    
     //
     // updateNav()
     // Display appropriate previous and next hover navigation.
     //
     updateNav: function() {
    
     Element.show('hoverNav'); 
    
     // if not first image in set, display prev image button
     if(activeImage != 0){
     Element.show('prevLink');
     document.getElementById('prevLink').onclick = function() {
     myLightbox.changeImage(activeImage - 1); return false;
     }
     }
    
     // if not last image in set, display next image button
     if(activeImage != (imageArray.length - 1)){
     Element.show('nextLink');
     document.getElementById('nextLink').onclick = function() {
     myLightbox.changeImage(activeImage + 1); return false;
     }
     }
     
     this.enableKeyboardNav();
     },
    
     //
     // enableKeyboardNav()
     //
     enableKeyboardNav: function() {
     document.onkeydown = this.keyboardAction; 
     },
    
     //
     // disableKeyboardNav()
     //
     disableKeyboardNav: function() {
     document.onkeydown = '';
     },
    
     //
     // keyboardAction()
     //
     keyboardAction: function(e) {
     if (e == null) { // ie
     keycode = event.keyCode;
     } else { // mozilla
     keycode = e.which;
     }
    
     key = String.fromCharCode(keycode).toLowerCase();
     
     if((key == 'x') || (key == 'o') || (key == 'c')){ // close lightbox
     myLightbox.end();
     } else if(key == 'p'){ // display previous image
     if(activeImage != 0){
     myLightbox.disableKeyboardNav();
     myLightbox.changeImage(activeImage - 1);
     }
     } else if(key == 'n'){ // display next image
     if(activeImage != (imageArray.length - 1)){
     myLightbox.disableKeyboardNav();
     myLightbox.changeImage(activeImage + 1);
     }
     }
    
    
     },
    
     //
     // preloadNeighborImages()
     // Preload previous and next images.
     //
     preloadNeighborImages: function(){
    
     if((imageArray.length - 1) > activeImage){
     preloadNextImage = new Image();
     preloadNextImage.src = imageArray[activeImage + 1][0];
     }
     if(activeImage > 0){
     preloadPrevImage = new Image();
     preloadPrevImage.src = imageArray[activeImage - 1][0];
     }
     
     },
    
     //
     // end()
     //
     end: function() {
     this.disableKeyboardNav();
     Element.hide('lightbox');
     new Effect.Fade('overlay', { duration: 0.2});
     showSelectBoxes();
     }
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getPageScroll()
    // Returns array with x,y page scroll values.
    // Core code from - quirksmode.org
    //
    function getPageScroll(){
    
     var yScroll;
    
     if (self.pageYOffset) {
     yScroll = self.pageYOffset;
     } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
     yScroll = document.documentElement.scrollTop;
     } else if (document.body) {// all other Explorers
     yScroll = document.body.scrollTop;
     }
    
     arrayPageScroll = new Array('',yScroll) 
     return arrayPageScroll;
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getPageSize()
    // Returns array with page width, height and window width, height
    // Core code from - quirksmode.org
    // Edit for Firefox by pHaez
    //
    function getPageSize(){
     
     var xScroll, yScroll;
     
     if (window.innerHeight && window.scrollMaxY) { 
     xScroll = document.body.scrollWidth;
     yScroll = window.innerHeight + window.scrollMaxY;
     } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
     xScroll = document.body.scrollWidth;
     yScroll = document.body.scrollHeight;
     } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
     xScroll = document.body.offsetWidth;
     yScroll = document.body.offsetHeight;
     }
     
     var windowWidth, windowHeight;
     if (self.innerHeight) { // all except Explorer
     windowWidth = self.innerWidth;
     windowHeight = self.innerHeight;
     } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
     windowWidth = document.documentElement.clientWidth;
     windowHeight = document.documentElement.clientHeight;
     } else if (document.body) { // other Explorers
     windowWidth = document.body.clientWidth;
     windowHeight = document.body.clientHeight;
     } 
     
     // for small pages with total height less then height of the viewport
     if(yScroll < windowHeight){
     pageHeight = windowHeight;
     } else { 
     pageHeight = yScroll;
     }
    
     // for small pages with total width less then width of the viewport
     if(xScroll < windowWidth){ 
     pageWidth = windowWidth;
     } else {
     pageWidth = xScroll;
     }
    
    
     arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
     return arrayPageSize;
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getKey(key)
    // Gets keycode. If 'x' is pressed then it hides the lightbox.
    //
    function getKey(e){
     if (e == null) { // ie
     keycode = event.keyCode;
     } else { // mozilla
     keycode = e.which;
     }
     key = String.fromCharCode(keycode).toLowerCase();
     
     if(key == 'x'){
     }
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // listenKey()
    //
    function listenKey () { document.onkeypress = getKey; }
     
    // ---------------------------------------------------
    
    function showSelectBoxes(){
     selects = document.getElementsByTagName("select");
     for (i = 0; i != selects.length; i++) {
     selects[i].style.visibility = "visible";
     }
    }
    
    // ---------------------------------------------------
    
    function hideSelectBoxes(){
     selects = document.getElementsByTagName("select");
     for (i = 0; i != selects.length; i++) {
     selects[i].style.visibility = "hidden";
     }
    }
    
    // ---------------------------------------------------
    
    //
    // pause(numberMillis)
    // Pauses code execution for specified time. Uses busy code, not good.
    // Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
    //
    function pause(numberMillis) {
     var now = new Date();
     var exitTime = now.getTime() + numberMillis;
     while (true) {
     now = new Date();
     if (now.getTime() > exitTime)
     return;
     }
    }
    
    // ---------------------------------------------------
    
    
    
    function initLightbox() { myLightbox = new Lightbox(); }
    Event.observe(window, 'load', initLightbox, false); 
    Code:
     <td class="webimg"> 
    
    <a href="digi/img/gfx/homepages/digiworx_v1.jpg" rel="lightbox" title="Lightbox popup">#im rel wird die function aufgerufen
    <img src="digi/img/thumbs/webdesign/digiworx_v1_thumb.gif" border="0" title="Lightbox popup">
    
    </a>
    </td> 
    und hier drunter ist die css datei dazu ich hoffe du kannst was damit anfangen hab ich ausserdem alles im quell text gefunden
    Code:
    lightbox{
     position: absolute;
     top: 40px;
     left: 0;
     width: 100%;
     z-index: 100;
     text-align: center;
     line-height: 0;
     }
    
    #lightbox a img{ border: none; }
    
    #outerImageContainer{
     position: relative;
     background-color: #fff;
     width: 250px;
     height: 250px;
     margin: 0 auto;
     }
    
    #imageContainer{
     padding: 10px;
     }
    
    #loading{
     position: absolute;
     top: 40%;
     left: 0%;
     height: 25%;
     width: 100%;
     text-align: center;
     line-height: 0;
     }
    #hoverNav{
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     z-index: 10;
     }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}
    
    #prevLink, #nextLink{
     width: 49%;
     height: 100%;
     background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
     display: block;
     }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
    
    
    #imageDataContainer{
     font: 10px Verdana, Helvetica, sans-serif;
     background-color: #fff;
     margin: 0 auto;
     line-height: 1.4em;
     }
    
    #imageData{
     padding:0 10px;
     }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
    #imageData #caption{ font-weight: bold; }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } 
    #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; } 
     
    #overlay{
     position: absolute;
     top: 0;
     left: 0;
     z-index: 90;
     width: 100%;
     height: 500px;
     background-color: #000;
     filter:alpha(opacity=60);
     -moz-opacity: 0.6;
     opacity: 0.6;
     }
     
    
    .clearfix:after {
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
     }
    
    * html>body .clearfix {
     display: inline-block; 
     width: 100%;
     }
    
    * html .clearfix {
     /* Hides from IE-mac \*/
     height: 1%;
     /* End hide from IE-mac */
     } 
     
     
  3. 16. August 2006
    wooohhooo hammer^^....is des auch der richtige code ?! weil irgendwie sieht des so aus, als hätte der des mit flash gemacht....

    ähm...wärst du vllt os nett und würdest mir erklären wie ich des hinbekomme ?

    also den letzten code muss ich in ner css datei speichern....und die kann ich dann zur index.html knallen, aber wie bekomm ich des hin, das wenn ich jetzt tuhumbnails hab, und draufgeklickt wird, des original bild, in original größe erscheint, des auch so aufgeht und dann sich der größe anpasst oO


    ich hoffe des is nich zu kompliziert

    aber 10er bekommste erstma

    greetZz

    pizZa
     
  4. 16. August 2006
    kannst mir gleich den 2ten geben wenn es ginge PPPPPPPPPPPPP naja iwe auch immer du musst den javascript code in eine js datei packen mit dem namen lightbox.js und dann einfach einen link machen wo drin vorkommt "rel="lightbox""

    und die js datei fügste so ein das schreibste zwischen <head> und </head>

    <script type="text/javascript" src="http://www.deinehp.de/lightbox.js"></script>

    statt http://www.deinehp.de deine hp halt eintragen aber ich glaub du weisst was da rein gehört ^^ so wenn du fragen hast adde mich in icq und wir labern
     
  5. 16. August 2006
    Also die Seite von ihm ist auf Jommla aufgenaut

    http://www.wildbits.de/mygallery/ <<-- schau dir mal die galerie an ! da ist das selbe Prinzip !
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.