Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: Unbenennen von Bildern in Photo Gallery

  1. #1
    Youngster
    Registriert seit
    19.10.2005
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Unbenennen von Bildern in Photo Gallery

    Hi

    ich habe folgende AJAX Gallery

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>AJAX Photo Gallery</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="gallery"> <div id="imagearea"> <div id="image"> <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a> <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a> </div> </div> <div id="thumbwrapper"> <div id="thumbarea"> <ul id="thumbs"> <li value="1"><img src="thumbs/1.jpg" width="179" height="100" alt="" /></li> <li value="2"><img src="thumbs/2.jpg" width="179" height="100" alt="" /></li> <li value="3"><img src="thumbs/3.jpg" width="179" height="100" alt="" /></li> <li value="4"><img src="thumbs/4.jpg" width="179" height="100" alt="" /></li> <li value="5"><img src="thumbs/5.jpg" width="179" height="100" alt="" /></li> </ul> </div> </div> </div> <script type="text/javascript"> var imgid = 'image'; var imgdir = 'fullsize'; var imgext = '.jpg'; var thumbid = 'thumbs'; var auto = true; var autodelay = 5; </script> <script type="text/javascript" src="slide.js"></script> </body> </html>
    mit folgender slide.js Datei

    Code:
    var slideShow=function(){ var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl; ta=document.getElementById(thumbid); ia=document.getElementById(imgid); t=ta.getElementsByTagName('li'); ie=document.all?true:false; st=3; ss=3; ft=10; fs=5; xp,yp=0; return{ init:function(){ document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)}; ys=this.toppos(ta); ye=ys+ta.offsetHeight; len=t.length;tar=[]; for(i=0;i<len;i++){ var id=t[i].value; tar[i]=id; t[i].onclick=new Function("slideShow.getimg('"+id+"')"); if(i==0){this.getimg(id)} } tarl=tar.length; }, scrl:function(d){ clearInterval(ta.timer); var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10) ta.timer=setInterval(function(){slideShow.mv(d,l)},st); }, mv:function(d,l){ ta.style.left=ta.style.left||'0px'; var left=ta.style.left.replace('px',''); if(d==1){ if(l-Math.abs(left)<=ss){ this.cncl(ta.id); ta.style.left='-'+l+'px'; }else{ta.style.left=left-ss+'px'} }else{ if(Math.abs(left)-l<=ss){ this.cncl(ta.id); ta.style.left=l+'px'; }else{ta.style.left=parseInt(left)+ss+'px'} } }, cncl:function(){clearTimeout(ta.timer)}, getimg:function(id){ if(auto){clearTimeout(ia.timer)} if(ci!=null){ var ts,tsl,x; ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0; for(x;x<tsl;x++){ if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)} } } if(!document.getElementById(id)){ var i=document.createElement('img'); ia.appendChild(i); i.id=id; i.av=0; i.style.opacity=0; i.style.filter='alpha(opacity=0)'; i.src=imgdir+'/'+id+imgext; }else{ i=document.getElementById(id); clearInterval(i.timer); } i.timer=setInterval(function(){slideShow.fdin(i)},fs); }, nav:function(d){ var c=0; for(key in tar){if(tar[key]==ci.id){c=key}} if(tar[parseInt(c)+d]){ this.getimg(tar[parseInt(c)+d]); }else{ if(d==1){ this.getimg(tar[0]); }else{this.getimg(tar[tarl-1])} } }, auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)}, fdin:function(i){ if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'} if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i} }, fdout:function(i){ i.av=i.av-fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'; if(i.av<=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}} }, lim:function(){ var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4; bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa; }, pos:function(e){ xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX; yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY; if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){ slideShow.scrl(-1); }else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){ slideShow.scrl(1); }else{slideShow.cncl()} }, leftpos:function(t){ var l=0; if(t.offsetParent){ while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent} }else if(t.x){l+=t.x} return l; }, toppos:function(t){ var p=0; if(t.offsetParent){ while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent} }else if(t.y){p+=t.y} return p; } }; }(); window.onload=function(){slideShow.init(); slideShow.lim()};
    Das Ganze sieht dann so aus http://sandbox.scriptiny.com/slideshow/

    Ich möchte die Bilder (1.jpg,2.jpg,3.jpg,4.jpg,5.jpg) gerne als TEXT.jpg einbinden. Passe ich die Dateinamen und die Links in der HTML an, zeigt er mir lediglich das Thombnail an. Muss in der JS auch etwas angepasst werden? Über Eure Hilfe bin ich sehr dankbar!

    Gruß
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von DVDFreak (20.10.2011 um 22:23 Uhr)

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Unbenennen von Bildern in Photo Gallery

    kannste des mal anständig formatieren, ich mein dass du codetags gesetzt hast in allen ehren, aber den kastenscheiss da kann doch keiner anständig überblicken
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    19.10.2005
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Unbenennen von Bildern in Photo Gallery

    Zitat Zitat von synaptic Beitrag anzeigen
    kannste des mal anständig formatieren, ich mein dass du codetags gesetzt hast in allen ehren, aber den kastenscheiss da kann doch keiner anständig überblicken
    Sorry, keine Ahnung, warum er es so anzeigte. Dachte, das muss so sein. Habs geändert.

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Unbenennen von Bildern in Photo Gallery

    also spontan würd ich behaupten dass du den value (übrigens ein nicht valides attribut in den LI-tags) bei den LI´s zu nem namen machen musst und dann eben das bild mit entsprechendem namen bezeichnen.

    is alles nich so easy mit den minifizierten scripts, bzw wenn einer tatsächlich so programmiert is er kaputter im kopf als man glauben mag

    und mit jquery is sowas viel schneller und simpler gelöst
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    19.10.2005
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Unbenennen von Bildern in Photo Gallery

    Zitat Zitat von synaptic Beitrag anzeigen
    also spontan würd ich behaupten dass du den value (übrigens ein nicht valides attribut in den LI-tags) bei den LI´s zu nem namen machen musst und dann eben das bild mit entsprechendem namen bezeichnen.

    is alles nich so easy mit den minifizierten scripts, bzw wenn einer tatsächlich so programmiert is er kaputter im kopf als man glauben mag

    und mit jquery is sowas viel schneller und simpler gelöst
    Das mit den LI Tags hatte ich bereits versucht. Dann zeigt er mir nur das Thumbnail an, nicht aber das große Bild.

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Unbenennen von Bildern in Photo Gallery

    mach ma bitte ne zip mit allen files fertig, dann muss ich mir nich den ganzen kram zusammensuchen..
    das script is auf jeden fall arg bescheiden zu lesen..

    edit: das sollte aber genau so fruchten.. also der value vom li ist der name des bildes ohne extension.
    HTML-Code:
     <li value="dorf"><img src="thumbs/dorf.jpg" width="179" height="100" alt="" /></li>
    und das script müsste aus dem ordner "fullsize" das bild dorf.jpg laden

    mach doch mal alerts an verschiedenen stellen und überprüf welche werte da verarbeitet werden..
    Geändert von synaptic (21.10.2011 um 20:01 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    19.10.2005
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Unbenennen von Bildern in Photo Gallery

    Das hatte ich so auch schon versucht - vergebens.

    Hier ist die Entwicklerseite, inkl. Zip mit den Files: http://www.scriptiny.com/2008/05/aja...ery-slideshow/

    Danke für deine Mühe!!!

  8. #8
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Unbenennen von Bildern in Photo Gallery

    ja bevor ich mich bemühe passieren 2 dinge..
    1) ich geh inne wanne nen erkältungsbad nehmen und zum anderen kannste mal zeigen, welche sachen du bereits probiert hast
    dennhier gehts ja um hilfe zur selbsthilfe :P
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    19.10.2005
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Unbenennen von Bildern in Photo Gallery

    Also versucht hatte ich genau deinen Ansatz von oben.

    Das Ganze funktioniert ja mit

    Code:
          <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>        
          <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
    Darum gehe ich davon aus, dass 'value' eine Ziffer sein muss.
    Ich habe zwar weniger Ahnung von JS, aber + und - verstehe ich auch noch. Vielleicht irre ich mich

    Also hatte ich auch versucht, Value als Ziffer zu lassen und lediglich die Datei sowie den Link zu ändern. Dann wird zwar das Thumbnail angezeigt, doch bleibt es beim großen Bild beim Laden. Erst nach Ablauf des Delay, wenn er zum nächsten Bild springt, wird wieder das große Bild angezeigt.

    In der JS steht ja auch
    Code:
      i.src=imgdir+'/'+id+imgext;
    Die id ist also definiert als Dateiname (nummerisch?) und imgext (also jpg).

    Ich würde sagen, das muss irgendwo am Folgenden liegen:

    Code:
                                           var id=t[i].value; tar[i]=id;                 t[i].onclick=new Function("slideShow.getimg('"+id+"')");                 if(i==0){this.getimg(id)}
    Und da reichen meine logischen Schlussfolgerungen nicht mehr aus

  10. #10
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Unbenennen von Bildern in Photo Gallery

    weisste, das schöne an der faxe is, dass ich mir mal die values hab ausgeben lassen und ich bekomm ständig nur eine 0, was das problem mit den namen beinhaltet

    nunja ich hatte ja vorher schon von jquery gesprochen, is zwar sinniger das ganze direkt damit aufzubauen, da wär der code auch schön sauber

    aber lange rede kurzer sinn...

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>AJAX Photo Gallery</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    
    <div id="gallery">
      <div id="imagearea">
        <div id="image">
          <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
          <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
        </div>
      </div>
      <div id="thumbwrapper">
        <div id="thumbarea">
          <ul id="thumbs">
            <li rel="lol" id="0"><img src="thumbs/lol.jpg" width="179" height="100" alt="" /></li>
            <li rel="bla" id="1"><img src="thumbs/bla.jpg" width="179" height="100" alt="" /></li>
            <li rel="blubb" id="2"><img src="thumbs/blubb.jpg" width="179" height="100" alt="" /></li>
            <li rel="frrt" id="3"><img src="thumbs/frrt.jpg" width="179" height="100" alt="" /></li>
            <li rel="traraa" id="4"><img src="thumbs/traraa.jpg" width="179" height="100" alt="" /></li>
          </ul>
        </div>
      </div>
    </div>
    
    <script type="text/javascript">
    var imgid = 'image';
    var imgdir = 'fullsize';
    var imgext = '.jpg';
    var thumbid = 'thumbs';
    var auto = true;
    var autodelay = 5;
    </script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="slide.js"></script>
    
    </body>
    </html>
    Code:
    var slideShow=function(){
        var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
        ta=document.getElementById(thumbid); ia=document.getElementById(imgid);
        t=ta.getElementsByTagName('li'); ie=document.all?true:false;
        st=3; ss=3; ft=10; fs=5; xp,yp=0;
        return{
            init:function(){
                document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)};
                ys=this.toppos(ta); ye=ys+ta.offsetHeight;
                len=t.length;tar=[];
                for(i=0;i<len;i++){
                    var id=$('#'+t[i].id).attr('rel'); tar[i]=id;
                    t[i].onclick=new Function("slideShow.getimg('"+id+"')");
                    if(i==0){this.getimg(id)}
                }
                tarl=tar.length;
            },
            scrl:function(d){
                clearInterval(ta.timer);
                var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10)
                ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
            },
            mv:function(d,l){
                ta.style.left=ta.style.left||'0px';
                var left=ta.style.left.replace('px','');
                if(d==1){
                    if(l-Math.abs(left)<=ss){
                        this.cncl(ta.id); ta.style.left='-'+l+'px';
                    }else{ta.style.left=left-ss+'px'}
                }else{
                    if(Math.abs(left)-l<=ss){
                        this.cncl(ta.id); ta.style.left=l+'px';
                    }else{ta.style.left=parseInt(left)+ss+'px'}
                }
            },
            cncl:function(){clearTimeout(ta.timer)},
            getimg:function(id){
                if(auto){clearTimeout(ia.timer)}
                if(ci!=null){
                    var ts,tsl,x;
                    ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
                    for(x;x<tsl;x++){
                        if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
                    }
                }
                if(!document.getElementById(id)){
                    var i=document.createElement('img');
                    ia.appendChild(i);
                    i.id=id; i.av=0; i.style.opacity=0;
                    i.style.filter='alpha(opacity=0)';
                    i.src=imgdir+'/'+id+imgext;
                }else{
                    i=document.getElementById(id); clearInterval(i.timer);
                }
                i.timer=setInterval(function(){slideShow.fdin(i)},fs);
            },
            nav:function(d){
                var c=0;
                for(key in tar){if(tar[key]==ci.id){c=key}}
                if(tar[parseInt(c)+d]){
                    this.getimg(tar[parseInt(c)+d]);
                }else{
                    if(d==1){
                        this.getimg(tar[0]);
                    }else{this.getimg(tar[tarl-1])}
                }
            },
            auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
            fdin:function(i){
                if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'}
                if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i}
            },
            fdout:function(i){
                i.av=i.av-fs; i.style.opacity=i.av/100;
                i.style.filter='alpha(opacity='+i.av+')';
                if(i.av<=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}}
            },
            lim:function(){
                var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4; 
                bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
            },
            pos:function(e){
                xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX; 
                yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
                if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){
                    slideShow.scrl(-1);
                }else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){
                    slideShow.scrl(1);
                }else{slideShow.cncl()}
            },
            leftpos:function(t){
                var l=0;
                if(t.offsetParent){
                    while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
                }else if(t.x){l+=t.x}
                return l;
            },
            toppos:function(t){
                var p=0;
                if(t.offsetParent){
                    while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
                }else if(t.y){p+=t.y}
                return p;
            }
        };
    }();
    
    window.onload=function(){slideShow.init(); slideShow.lim()};
    ich habs nur minimal gebraucht,damit ich das wie gewohnt machen kann (ich merk grad ich kann kaun noch oldschool-Js..^^ und das wo ich mich damals gegen jquery gewehrt hab mit händen und füßen
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Wie installiere ich Coppermine Photo Gallery?
    Von smartie im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 19.02.2011, 10:53
  2. Ausschnitt voon Bildern bei Core Draw Photo Suite 12...
    Von Eagleye im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 0
    Letzter Beitrag: 03.06.2007, 23:22
  3. Photo Impact
    Von davidos_no.1 im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 8
    Letzter Beitrag: 28.11.2005, 11:21
  4. photo von mich
    Von edelchen im Forum Das Forum für Spiele, Fun & Jokes
    Antworten: 7
    Letzter Beitrag: 16.12.2004, 22:31

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •