1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Bild Fenster Öffnen

  • Unregistrierter Benutzer
  • 31. Januar 2009 um 20:20
  • Unregistrierter Benutzer
    Youngster
    Beiträge
    11
    • 31. Januar 2009 um 20:20
    • #1

    Hallo,
    Ich habe auf meiner HP Bilder in einer verkleinerten Ansicht eingefügt. Wenn ich jetzt auf ein Bild klicke wird das Bild in der Normal-Ansicht in einem neuen Tab geöffnet. Ich möchte es gerne so machen das beim Draufklicken sich ein Fenster öffnet das so aussieht:
    [Blockierte Grafik: http://s2b.directupload.net/images/090131/temp/zajqo7wy.jpg]
    Wo hier das schwarze Feld ist soll dann das Bild sein. Wenn auf Close geklickt wird soll sich das Bild wieder schließen.
    Jemand ne Idee dazu?

    Grüsse

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 31. Januar 2009 um 20:33
    • #2

    google nach lightbox

  • Unregistrierter Benutzer
    Youngster
    Beiträge
    11
    • 31. Januar 2009 um 22:19
    • #3
    Zitat von synaptic

    google nach lightbox

    Danke, genau sowas habe ich gesucht.

  • Unregistrierter Benutzer
    Youngster
    Beiträge
    11
    • 13. Februar 2009 um 00:59
    • #4

    Hallo, ich habe mir jetzt die SlimBox eingebaut. Ich habe das Problem das sich das Fenster ziemlich schnell aufzieht und somit die CPU Auslastung auf 100% geht. Kann man die Geschwindigkeit mit der sich das Fenster ausdehnt irgendwie verlangsammen?

    Grüsse

  • Friedel
    Interessierte/r
    Beiträge
    114
    • 13. Februar 2009 um 01:32
    • #5

    Für die CPU-Auslastung spielt es keine Rolle, wie schnell sich die Lightbox aufbaut.

  • Unregistrierter Benutzer
    Youngster
    Beiträge
    11
    • 13. Februar 2009 um 12:08
    • #6
    Zitat von Friedel

    Für die CPU-Auslastung spielt es keine Rolle, wie schnell sich die Lightbox aufbaut.

    Doch. Die CPU wird durch den Aufbau auf 100% gebracht. Ich habe schon Webseiten gesehen da wir die SlimBox langsamer aufgezogen, und die CPU Auslastung lag nur bei ~65%, das ausziehen hat nicht mehr geruckelt, auf beiden Websites hatten die Bilder die gleiche Auflösung.

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 13. Februar 2009 um 12:22
    • #7

    musste mal dat script posten...
    so ausm freilauf heraus is schwer zu sagen wo der timeout steckt

  • Unregistrierter Benutzer
    Youngster
    Beiträge
    11
    • 13. Februar 2009 um 14:13
    • #8
    Zitat von synaptic

    musste mal dat script posten...
    so ausm freilauf heraus is schwer zu sagen wo der timeout steckt


    SlimBox 1.69

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 13. Februar 2009 um 15:25
    • #9

    hab eigentlich gedacht du würdest das script posten.. ich hab an sich keine lust mir erst was runterladen zu müssen...

  • Billbos
    Profi
    Beiträge
    485
    • 13. Februar 2009 um 15:34
    • #10

    Kennt hier jemand ein Script indem ich bei der Lightbox vor und zurückschalten kann, zwischen Bildern?

    http://www.danielsfotos.com

  • driver
    Forum Guru
    Reaktionen
    6
    Beiträge
    20.727
    • 13. Februar 2009 um 16:31
    • #11

    is doch so in der lightbox. kannst vor und zurück...
    musst mal ins bild min cursor gehen, dann kommt next und previous

    wie bei mir -> http://www.devil-driver.de/index.php?page=golf_gallery&id=2

    >> die icq-schreiberlinge bitte dies hier beachten

    [Blockierte Grafik: http://www.devil-driver.de/stuff/forum-banner.png]

    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  • Unregistrierter Benutzer
    Youngster
    Beiträge
    11
    • 13. Februar 2009 um 16:39
    • #12
    Zitat von synaptic

    hab eigentlich gedacht du würdest das script posten.. ich hab an sich keine lust mir erst was runterladen zu müssen...

    slimbox2.js :

    Code
    /*
        Slimbox v2.02 - The ultimate lightweight Lightbox clone for jQuery
        (c) 2007-2009 Christophe Beyls <http://www.digitalia.be>
        MIT-style license.
    */
    (function(w){var E=w(window),u,g,F=-1,o,x,D,v,y,L,s,n=!window.XMLHttpRequest,e=window.opera&&(document.compatMode=="CSS1Compat")&&(w.browser.version>=9.3),m=document.documentElement,l={},t=new Image(),J=new Image(),H,a,h,q,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id='lbOverlay' />')[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));h=w('<div id="lbImage" />').appendTo(a).append(q=w('<div style="position: relative;" />').append([I=w('<a id='lbPrevLink' href='#' />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(f)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id='lbCloseLink' href='#' />').add(H).click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+((e?m.clientHeight:E.height())/2);L=u.initialWidth;s=u.initialHeight;w(a).css({top:Math.max(0,y-(s/2)),width:L,height:s,marginLeft:-L/2}).show();v=n||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();k(1);g=O;u.loop=u.loop&&(g.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=e?m.clientWidth:E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function k(M){w("object").add(n?"select":"embed").each(function(O,P){if(M){w.data(P,"slimbox",P.style.visibility)}P.style.visibility=M?"hidden":w.data(P,"slimbox")});var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",p)}function p(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?f():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function f(){return b(D)}function b(M){if(M>=0){F=M;o=g[F][0];x=(F||(u.loop?g.length:0))-1;D=((F+1)%g.length)||(u.loop?0:-1);r();a.className="lbLoading";l=new Image();l.onload=j;l.src=o}return false}function j(){a.className="";w(h).css({backgroundImage:"url("+o+")",visibility:"hidden",display:""});w(q).width(l.width);w([q,I,d]).height(l.height);w(A).html(g[F][1]||"");w(K).html((((g.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,g.length));if(x>=0){t.src=g[x][0]}if(D>=0){J.src=g[D][0]}L=h.offsetWidth;s=h.offsetHeight;var M=Math.max(0,y-(s/2));if(a.offsetHeight!=s){w(a).animate({height:s,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+s,marginLeft:-L/2,visibility:"hidden",display:""});w(h).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,i)})}function i(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function r(){l.onload=null;l.src=t.src=J.src=o;w([a,h,c]).stop(true);w([I,d,h,G]).hide()}function C(){if(F>=0){r();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,k)}return false}})(jQuery);
    
    
    // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
    jQuery(function($) {
        $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        });
    });
    Alles anzeigen
  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 13. Februar 2009 um 17:52
    • #13

    schraub mal den wert von resizeDuration:400 höher...

  • Unregistrierter Benutzer
    Youngster
    Beiträge
    11
    • 13. Februar 2009 um 18:37
    • #14

    Jou das klappt, danke.

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 13. Februar 2009 um 18:46
    • #15

    jo kein ding:)

    wat macht die auslastung?
    oder war des schon im

    Zitat von Unregistrierter Benutzer

    Jou das klappt, danke.


    drin enthalten?

  • Unregistrierter Benutzer
    Youngster
    Beiträge
    11
    • 13. Februar 2009 um 18:54
    • #16
    Zitat von synaptic

    jo kein ding:)

    wat macht die auslastung?

    Ist jetzt so um die 80%, auf meinem recht alten Rechner. Ich frage mich warum das so hoch ist... Aber wenigstens ruckelt es nicht mehr.

Tags

  • www
  • bilder
  • http
  • spiel
  • jpg
  • fenster
  • bild
  • php
  • page
  • upload
  • benutzer
  • index
  • gallery
  • google
  • driver
  • timeout
  • index.php
  • script
  • cursor
  • box
  • golf
  • cpu
  • lightbox
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern