Unbenennen von Bildern in Photo Gallery

DVDFreak

Hi

ich habe folgende AJAX Gallery

HTML

[TABLE]
[TR]
[TD='class: number'][/TD]
[TD='class: content'][/TD]
[/TR]
[/TABLE]


<!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>

Alles anzeigen

mit folgender slide.js Datei

Code

[TABLE]
[TR]
[TD='class: number'][/TD]
[TD='class: content'][/TD]
[/TR]
[/TABLE]


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()};

Alles anzeigen

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ß

synaptic

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

DVDFreak

Zitat von synaptic

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.

synaptic

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

DVDFreak

Zitat von synaptic

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.

synaptic

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

<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..

DVDFreak

Das hatte ich so auch schon versucht - vergebens.

Hier ist die Entwicklerseite, inkl. Zip mit den Files: http://www.scriptiny.com/2008/05/ajax-i…lery-slideshow/

Danke für deine Mühe!!!

synaptic

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

DVDFreak

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

synaptic

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

<!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>

Alles anzeigen

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()};

Alles anzeigen

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

DVDFreak

Genial! Das funktioniert wurderbar! Weiß garnicht, wie ich Dir danken kann!!!!!

synaptic

https://verein.ing-diba.de/sonstiges/6119…nchenrettung-ev stimm ab für meinen verein, geht pro email-adresse 3 mal und den link weitergeben
alternativ kannste auch was dem verein spenden http://kaninchenrettung.de

DVDFreak

Hast ne pn

Tags

Benutzer online in diesem Thema