Einbau JS-slideshow in meine site

Dieses Thema Einbau JS-slideshow in meine site im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von bricot, 21. Jan. 2009.

Thema: Einbau JS-slideshow in meine site Hallo zusammen Ich möchte die slideshow http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm in meine...

  1. Hallo zusammen

    Ich möchte die slideshow http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm in meine site einbauen. Leider verstehe ich mangels Verfahrens- und JS-Kenntnisse das Prozedere und div. Parameter nicht.

    Momentaner Stand meiner Bemühungen:

    Page A: Meine site mit ca. 25 thumbnails Grösse 150 x 150 und Datumangabe, funktionsfähig (<td width=190 height=190><img name=23.09.2005_001_t.jpg src=f_img/f_20050923/23.09.2005_001_t.jpg width=150 height=150 alt= /></td>). Bei click auf die thumbnails sollte in einem neuen window eine slideshow mit den Bildern dieser Datums-Serie gestartet werden. Die slideshow sollte zu beliebigem Zeitpunkt beendet werden, das window geschlossen und die aufrufende page A wieder eingeblendet werden.

    Page B: Leere page mit dem JS-Code im head gem. www.dynamicdrive.com. / Step 1. Der array fadeimages wurde gem meinem Umfeld angepasst (z.B. fadeimages[0]=[f_img/f_20051010/10.10.2005_24.jpg, , ] ).

    Warum man den array fadeimages2 braucht habe ich nicht verstanden bzw. die Definition «invoke two separate fade in slideshows . . .» ist mir kein Begriff.

    Page C: Leere page mit dem JS-Code im body gem. www.dynamicdrive.com. / Step 2. Die im Aufruf der Funktion mitgegebenen Parameter 2 / 3 / 7 habe ich nicht begriffen. Die Grösse des grössten Img. ist z.B. 2400x1600, dieses soll aber ohne Verlust auf einem 17-BS angezeigt werden.

    Wo muss ich was einbauen, dass die slideshow aufgerufen wird ???

    Besten Dank im Voraus für Hilfe - Gruss bricot
     
  2. Hallo Bricot,
    poste doch mal die Adressen deiner Seiten. Ohne es zu sehen und sich den Quellcode anzuschauen, kann man nicht viel dazu sagen. Warum hast Du denn gleich mehrere Seiten gemacht?
    Viele Grüße - Ulrich
     
  3. Hallo UlrichBa

    Leider kann ich Dir die Adressen meiner Seiten nicht posten, da das Ganze noch im Versuchsstadium ist bzw. noch nicht online gestellt ist. In der letzten Nacht habe ich alles auf verschiedene Arten probiert und siehe es funktioniert !

    Habe als Laie versucht mich in den Code hinein zu denke und habe den Pferdefuss (nur für meine Bedürfnisse !) an dieser Lösung auch lokalisiert. Der gesamte Code wird in die htm-site (head-section) eingebaut und dann muss im array explizit name/path der img. angegeben werden. Dann wird in der body-section der Aufruf der JS-function eingetragen. Da ich eben keine JS-Kenntnisse habe kann ich den code nicht umbauen. Der Originalcode stellt für meine Bedürfnisse einen grossen Aufwand dar, da ich pro Foto-session eine eine htm-site machen müsste (1 - n, bis dato ca.32).

    Meine Vorstellung ist eigentlich ziemlich simple: Die JS-function soll event. nicht im htm-code verschachtelt sein und per parameter (path, vorderer teil des img.-Namen - 20051231, size etc.) gesteuert werden. Die Anzahl img, size Name etc. soll wahlweise angezeigt werden

    Zu Deiner Frage «warum mehrere Seiten . . .» - Page A beinhaltet pro Foto-session ein thumbnail (zum Aufruf der slideshow pro session). Page B beinhaltet den functionalen JS-code und page C den Aufruf der JS-procedure. Nachdem ich mir die letzte Nacht um die Ohren schlug, weis ich es ja besser . . . ;-)

    Nun bin ich am Testen einer anderen Version die ich im web gefunden habe. Ich werde mich sicher wieder in der Angelegenheit melden und Hilfe erflehen.

    Ich danke Dir bestens für Dein Interesse an meinem Problem - Gruss bricot
    [br][br]Erstellt am: 22.01.09 um 20:30:47[hr][br]Guten Abend

    Habe eine slideshow im web gefunden, die ich in meine page eingebaut habe. Funktioniert alles bestens - aber . . . Um die JS nicht pro htm-document (pro foto-session) redundant zu führen, möchte ich sie auslagern.

    Da ich über keine JS-Kenntnisse verfüge bräuchte ich Hilfe. Kann mir bitte jemand sage was ich ändern muss bzw. was ich in welches JS-Document (xxx.js) einfügen muss.

    Vielen Dank im voraus für Hilfe - mfg bricot


    <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
    <html>
    <head>
    <style type=text/css>
    .centerdiv{ /*IE method of centering a relative div*/
    text-align: center;
    }
    .centerdiv>div{ /*Proper way to center a relative div*/
    margin: 0 auto;
    }
    </style>
    <script type=text/javascript>
    /***********************************************
    * Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    * http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
    ***********************************************
    * Step 1: Insert the following script to the HEAD section of your page:
    * Configure the array fadeimages[] to reference the images you want to be displayed.
    ***********************************************/
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    /*
    fadeimages[0]=[photo1.jpg, , ] //plain image syntax
    fadeimages[1]=[photo2.jpg, http://www.cssdrive.com, ] //image with link syntax
    fadeimages[2]=[photo3.jpg, http://www.javascriptkit.com, _new] //image with link and target syntax
    */
    fadeimages[0]=[f_img/f_20051010/20051010_024.jpg, , ]
    fadeimages[1]=[f_img/f_20051010/20051010_025.jpg, , ]
    fadeimages[2]=[f_img/f_20051010/20051010_026.jpg, , ]
    fadeimages[3]=[f_img/f_20051010/20051010_027.jpg, , ]

    var fadebgcolor=white

    ////NO need to edit beyond here/////////////

    var fadearray=new Array() //array to cache fadeshow instances
    var fadeclear=new Array() //array to cache corresponding clearinterval pointers

    var dom=(document.getElementById) //modern dom browsers
    var iebrowser=document.all

    function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
    this.pausecheck=pause
    this.mouseovercheck=0
    this.delay=delay
    this.degree=10 //initial opacity degree (10%)
    this.curimageindex=0
    this.nextimageindex=1
    fadearray[fadearray.length]=this
    this.slideshowid=fadearray.length-1
    this.canvasbase=canvas+this.slideshowid
    this.curcanvas=this.canvasbase+_0
    if (typeof displayorder!=undefined)
    theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
    this.theimages=theimages
    this.imageborder=parseInt(borderwidth)
    this.postimages=new Array() //preload images
    for (p=0;p<theimages.length;p++){
    this.postimages[p]=new Image()
    this.postimages[p].src=theimages[p][0]
    }

    var fadewidth=fadewidth+this.imageborder*2
    var fadeheight=fadeheight+this.imageborder*2

    if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
    document.write('<div id=master'+this.slideshowid+' style=position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;><div id='+this.canvasbase+'_0 style=position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'></div><div id='+this.canvasbase+'_1 style=position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'></div></div>')
    else
    document.write('<div><img name=defaultslide'+this.slideshowid+' src='+this.postimages[0].src+'></div>')

    if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
    this.startit()
    else{
    this.curimageindex++
    setInterval(fadearray[+this.slideshowid+].rotateimage(), this.delay)
    }
    }

    function fadepic(obj){
    if (obj.degree<100){
    obj.degree+=10
    if (obj.tempobj.filters&&obj.tempobj.filters[0]){
    if (typeof obj.tempobj.filters[0].opacity==number) //if IE6+
    obj.tempobj.filters[0].opacity=obj.degree
    else //else if IE5.5-
    obj.tempobj.style.filter=alpha(opacity=+obj.degree+)
    }
    else if (obj.tempobj.style.MozOpacity)
    obj.tempobj.style.MozOpacity=obj.degree/101
    else if (obj.tempobj.style.KhtmlOpacity)
    obj.tempobj.style.KhtmlOpacity=obj.degree/100
    else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
    obj.tempobj.style.opacity=obj.degree/101
    }
    else{
    clearInterval(fadeclear[obj.slideshowid])
    obj.nextcanvas=(obj.curcanvas==obj.canvasbase+_0)? obj.canvasbase+_0 : obj.canvasbase+_1
    obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
    obj.populateslide(obj.tempobj, obj.nextimageindex)
    obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
    setTimeout(fadearray[+obj.slideshowid+].rotateimage(), obj.delay)
    }
    }

    fadeshow.prototype.populateslide=function(picobj, picindex){
    var slideHTML=
    if (this.theimages[picindex][1]!=) //if associated link exists for image
    slideHTML='<a href='+this.theimages[picindex][1]+' target='+this.theimages[picindex][2]+'>'
    slideHTML+='<img src='+this.postimages[picindex].src+' border='+this.imageborder+'px>'
    if (this.theimages[picindex][1]!=) //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }

    fadeshow.prototype.rotateimage=function(){
    if (this.pausecheck==1) //if pause onMouseover enabled, cache object
    var cacheobj=this
    if (this.mouseovercheck==1)
    setTimeout(function(){cacheobj.rotateimage()}, 100)
    else if (iebrowser&&dom||dom){
    this.resetit()
    var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    crossobj.style.zIndex++
    fadeclear[this.slideshowid]=setInterval(fadepic(fadearray[+this.slideshowid+]),50)
    this.curcanvas=(this.curcanvas==this.canvasbase+_0)? this.canvasbase+_1 : this.canvasbase+_0
    }
    else{
    var ns4imgobj=document.images['defaultslide'+this.slideshowid]
    ns4imgobj.src=this.postimages[this.curimageindex].src
    }
    this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
    }

    fadeshow.prototype.resetit=function(){
    this.degree=10
    var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    if (crossobj.filters&&crossobj.filters[0]){
    if (typeof crossobj.filters[0].opacity==number) //if IE6+
    crossobj.filters(0).opacity=this.degree
    else //else if IE5.5-
    crossobj.style.filter=alpha(opacity=+this.degree+)
    }
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=this.degree/101
    else if (crossobj.style.KhtmlOpacity)
    crossobj.style.KhtmlOpacity=this.degree/100
    else if (crossobj.style.opacity&&!crossobj.filters)
    crossobj.style.opacity=this.degree/101
    }

    fadeshow.prototype.startit=function(){
    var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    this.populateslide(crossobj, this.curimageindex)
    if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
    var cacheobj=this
    var crossobjcontainer=iebrowser? iebrowser[master+this.slideshowid] : document.getElementById(master+this.slideshowid)
    crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
    crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
    }
    this.rotateimage()
    }
    </script>

    <link rel=stylesheet media=screen href=f_site.css />
    </head>

    <body background=f_img/hintergr.jpg leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
    <p class=bold24><br />  DAY - 10.10.2005 <br /><br /></p>

    <div class=centerdiv>
    <!-- ***********************************************
    Step 2: All that's left now is to insert the below code into the BODY of your
    page where you want the slideshow(s) to be displayed.
    ************************************************ -->
    <script type=text/javascript>
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
    new fadeshow(fadeimages, 800, 600, 0, 2000, 1, R)
    //new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
    </script>
    </div>
    </body>
    </html>
     
  4. Hallo Bricot,
    Du kannst alles was zwischen
    Code:
    <script type=text/javascript>
    und
    Code:
    </script>
    steht auslagern. Das heißt diesen Code in der HTML-Datei löschen und in eine externe js-Datei auslagern. Dann diese Datei mit
    Code:
    <script type=text/javascript src=xxxx.js></script>
    im HTML-Dokument einziehen.
    Viel Erfolg und viele Grüße - Ulrich Bangert
     
  5. Hallo Ulrich

    Vielen Dank für Deine Hilfe - das mit dem Auslagern des JS-code funktioniert prächtig.

    Wie Du sicher bemerkt hast, habe ich die erste slideshow wieder in Bearbeitung. Ich hatte noch zwei andere heruntergeladen, aber die eine konnte ich nicht starten und die andere hatte einen Fehler (??? - Stack overflow in line:0 - ???, bedeutet für mich natürlich nur Bahnhof . . .). Schade, schade - das währe gerade die Version die mir am besten gefallen hätte. Kommt ohne explizite Angabe der Img.-Namen aus - path, Struktur des Namen und max. Anzahl Img. etc. wird im Aufruf-Parameter mitgegeben.

    Habe mir am Samstag in einem Anflug von Ueberschätzung ein JS-Handbuch gekauft - meine Gehversuche damit waren aber eher etwas für die Witzecke dieses Forums . . .

    Gruss - Brigitte
     
Die Seite wird geladen...

Einbau JS-slideshow in meine site - Ähnliche Themen

Forum Datum
Einbau einer Grafikkarte Windows 10 Forum 8. Okt. 2016
zweite Festplatte in einen Rechner einbauen. Hardware 28. Aug. 2016
Nach SSD Einbau und Installation kein Starten möglich Hardware 3. Juni 2014
Festplatte (mit Windows 7) aus Fremdgerät einbauen Windows 7 Forum 10. Jan. 2014
Windows bootet nach SSD einbau und Windows 8.1 nur bei jedem 4-6. mal korrekt Windows XP Forum 30. Okt. 2013