Picasa Diashow als Popup Fenster aber wie...

Segelyacht Nanumea · 27. Juni 2015

Hallo zusammen,

ich möchte auf der Seite Fotos auf meiner HP die Links zu den Diashows meiner Fotos in Picasa einfügen, dass ganze soll so aussehen, dass wenn ich auf den Link Klicke, ein kleines Fenster aufgeht, in dem die Diashow läuft, den Link zum Einbetten einer Diashow füge ich hier einmal ein :
<embed type="application/x-shockwave-flash" src="https://photos.gstatic.com/media/slideshow.swf" width="800" height="533" flashvars="host=picasaweb.google.com&captions=1&hl=de&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F111376037177916050469%2Falbumid%2F5851859303784209009%3Falt%3Drss%26kind%3Dphoto%26hl%3Dde" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

Eigentlich ist die in ZP integrierte Diashow genial, da müsste ich aber die Fotos in meinem Webspace einfügen und da habe ich Angst, das meine 1,5GB schnell voll sind...

Danke im Voraus für Eure Antworten.

Mario · 27. Juni 2015

Hallo Edip,
ich habe das HIER mal probiert, funktioniert soweit ganz gut.

Einstellungen > CSS

CSS

<style>
#hintergrund {
display:none;
z-index:8000;
position: fixed;
height:100%;
width:100%;
top:0px;
left:0px;
background:#000;
}




#popup {
display: none;
z-index: 8001;
position: fixed;
width:820px;
top: 20%;
left: 50%;
margin-left: -410px;
}




div.schliessen {
position: relative;
height: 30px;
width: 30px;
left: -7px;
bottom: -15px;
background: url("http://zella.de/bilder/close-black3.png") no-repeat scroll 0 0 transparent;
float: right;
cursor: pointer;




}




#popup_inhalt {
}




@media (max-width: 800px) {
div.schliessen {
left: -410px;
}}




</style>




<script type="text/javascript">




jQuery(function($) {




var popup_zustand = false;




$(".popup_oeffnen").click(function() {




if(popup_zustand == false) {




$("#popup").fadeIn("normal");




$("#hintergrund").css("opacity", "0.8");




$("#hintergrund").fadeIn("normal");




popup_zustand = true;




}




return false;




});




$(".schliessen").click(function() {




if(popup_zustand == true) {




$("#popup").fadeOut("normal");




$("#hintergrund").fadeOut("normal");




popup_zustand = false;




}




});




});




</script>

Alles anzeigen

Und im Inhaltsbereich Widget > Quelltext

HTML

<a href="#"><img class="popup_oeffnen image" border="0" src="http://zella.de/bilder/button_klick_hier.png"></a> <div id="popup"> <div class="schliessen"></div> <div id="popup_inhalt">
<embed type="application/x-shockwave-flash" src="https://photos.gstatic.com/media/slideshow.swf" width="800" height="533" flashvars="host=picasaweb.google.com&captions=1&hl=de&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F111376037177916050469%2Falbumid%2F5851859303784209009%3Falt%3Drss%26kind%3Dphoto%26hl%3Dde" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</div> </div> <div id="hintergrund"></div>

Aber!

Ist das Flash, du solltest auf Apple-Geräten prüfen ob da eine HTML5-Variante nachgeladen wird.
Ist das nicht Responsive, deshalb habe ich den Schließen-Button so eingefügt das er in der mobilen Ansicht Mittig rutscht, sonst kommt man da nicht mehr dran.

Segelyacht Nanumea · 28. Juni 2015

Hallo Mario,
wow... Danke Dir vielmals, ich muss mal schauen ob ich das hinkriege, rechne mir auch mal aus ob es nicht übertriebene Sorge ist, mit meiner Angst das die monatlichen Diashows von etwa 30Fotos meinen
Webspace von 1,5GB irgendwann ausschöpfen...

Segelyacht Nanumea · 28. Juni 2015

Hey Mario,
deinen Link habe ich jetzt erst entdeckt sieht Klasse aus aber funktioniert nicht auf dem Ipad, danke trotzdem für Deine Mühe.

Mario · 28. Juni 2015

Hallo Edip,
ich verstehe auch nicht warum Google hier das längst tot geschriebene Flash verwendet. Die Zeiten zu versuchen der Konkurrenz so eines auszuwischen sind längst vorbei.

Segelyacht Nanumea · 28. Juni 2015

Hallo Mario,
was für Alternativen zu Picasa gäbe es denn, so das man das in ZP integrieren könnte?

Hanabi · 28. Juni 2015

Zitat von Segelyacht Nanumea

Hallo Mario,
wow... Danke Dir vielmals, ich muss mal schauen ob ich das hinkriege, rechne mir auch mal aus ob es nicht übertriebene Sorge ist, mit meiner Angst das die monatlichen Diashows von etwa 30Fotos meinen
Webspace von 1,5GB irgendwann ausschöpfen...

Hallo, Edip,

Ich bin gerade gestern darüber gestolpert, dass wir nach gut einem Jahr Vereinsleben bereits 500 MB des Webspace belegt haben. Ich muss mich also mal um die Fotokomprimierung kümmern. Deine Sorge ist durchaus berechtigt.

Segelyacht Nanumea · 28. Juni 2015

Hallo Thomas,
eine einache Art die Fotos zu kompriemierem ist es, dia ausgewählten Fotos mit der Funktion Senden an Emailempfänger zu Komprimieren, muß mal schauen wie groß die Bilder dann noch sind.

Hanabi · 28. Juni 2015

Hallo Edip,

wir hatten dieses Wochenende 2 Tage Kinder- und Jugendcamp mit 60 Kindern aus 4 Vereinen. Ich bin gerade stolzer Besitzer von 659 neuen Fotos geworden

ThM · 29. Juni 2015

Hallo Edip .....,

Zitat von Segelyacht Nanumea

Hallo Mario,
was für Alternativen zu Picasa gäbe es denn, so das man das in ZP integrieren könnte?

..... wenn Du noch ein wenig Zeit hast, dann bestünde die Möglichkeit ein simples aber effektives Widget mit einer externen Java Script Ressource zu erstellen, dass die Anzeige von Picasa Bildern unterstützt und eine Vergrößerung per Fancybox erlaubt. Eine Slideshow ist zwar damit nicht möglich, aber vieleicht erst mal besser als gar nix.

Segelyacht Nanumea · 29. Juni 2015

Hallo Thomas,
das hört sich prima an, die Zeit würde ich mir sogar gerne nehmen...

Mario · 29. Juni 2015

Hallo Edip,
du schreibst das dir die Bildergalerie von Zeta gut gefällt und gern den Speicherplatz von Picasa nutzen möchtest.
Das lässt sich recht einfach realisieren, allerdings ist hierbei etwas Handarbeit gefragt.
Hier ganz unten auf der Seite.

Füge einen neuen Artikel > Quelltext ein, füge unten stehenden HTML-Code ein und kopiere die URL der Bilder bei Picasa in den Code.

HTML

<div id="iga0" class="zpImageGallery"
data-width="128"
data-height="72"
data-margin="10"
data-bordercolor="default"
data-borderwidth="0"
data-numbershow="0"
data-titleshow="0"
data-titleposition="off"
data-transition="elastic"
data-inner-transition="white"
data-slideshow="0"
data-slideshowinterval="0"
data-lang="de">
<a class="fancybox" href="https://lh3.googleusercontent.com/-GVj4XdjMHXc/UVlF9Ed4tVI/AAAAAAAACmA/NiBRgulbbHM/s800/P3310427.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-GVj4XdjMHXc/UVlF9Ed4tVI/AAAAAAAACmA/NiBRgulbbHM/s128/P3310427.JPG" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-pFxdHe11o1Y/UVlLV1B9fDI/AAAAAAAADI8/fZIoGDn3hUU/s800/P3310491.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-pFxdHe11o1Y/UVlLV1B9fDI/AAAAAAAADI8/fZIoGDn3hUU/s128/P3310491.JPG" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-QnJsB-NY5dY/UVlCWcrjZpI/AAAAAAAACbI/fnax1IA0Vhg/s800/P3300331.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-QnJsB-NY5dY/UVlCWcrjZpI/AAAAAAAACbI/fnax1IA0Vhg/s128/P3300331.JPG" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-Z4aU260dS-0/UVlBEmLmeYI/AAAAAAAACU4/q3VsBtG8GZE/s800/P3300280.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-Z4aU260dS-0/UVlBEmLmeYI/AAAAAAAACU4/q3VsBtG8GZE/s128/P3300280.JPG" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-6jKjxh3u9Jc/UVk-DYdKGNI/AAAAAAAACRw/pSOwBwWE1n0/s800/P3290252.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-6jKjxh3u9Jc/UVk-DYdKGNI/AAAAAAAACRw/pSOwBwWE1n0/s128/P3290252.JPG" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-qqm4FqSzxrk/UVk-EoUz8kI/AAAAAAAACR4/fUSiuFEY5sw/s800/P3290253.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-qqm4FqSzxrk/UVk-EoUz8kI/AAAAAAAACR4/fUSiuFEY5sw/s128/P3290253.JPG" width="128" title="" alt="" />
</a>
</div>

Alles anzeigen

Segelyacht Nanumea · 29. Juni 2015

Hallo Mario,
das ist ja echt Klasse, ich muss allerdings zugeben, dass ich mich mit den HTML Codes nicht unbedingt soo auskenne, die URL der Bilder kann ich dann der Reihe nach unter Deinen Quelltext kopieren??
Eine Widget Lösung wäre für mich ehrlich gesagt die einfachere Lösung aber Wahnsinn was Du hier so zauberst, Hut ab und ganz herzlichen Dank für Deine Mühe, ich meine mit der Lösung könnte ich auch leben, wenn Du mir vielleicht nur moch erklärst wo genau ich die Url einfüge.

Segelyacht Nanumea · 29. Juni 2015

Mario, Kommando zurück, wer lesen kann ist klar im Vorteil, habe die URL der einzelnen Bilder soeben entdeckt, ich glaube so werde ich dss machen....

Ganz lieben Dank

Segelyacht Nanumea · 30. Juni 2015

Hallo Mario,
kann man realisieren, dass die Bildergalerie über einen einfachen Link gestartet wird, also ohne die Thumbnails, anders wäre es auf meiner HP nicht zu realisieren.

siehe HP : http://nanumea.de/fotos.html#a1820_tab4

Danke Dir im Voraus für Deine Bemühungen...

Mario · 30. Juni 2015

Ja, dazu lässt du die Bildervorschau einfach weg und fügst für das erste Bild einen Textlink ein.
Sollte dann so aussehen.

So sieht dann der Code aus:

HTML

<div id="iga0" class="zpImageGallery"
data-width="128"
data-height="72"
data-margin="10"
data-bordercolor="default"
data-borderwidth="0"
data-numbershow="0"
data-titleshow="0"
data-titleposition="off"
data-transition="elastic"
data-inner-transition="white"
data-slideshow="0"
data-slideshowinterval="0"
data-lang="de">




<a class="fancybox" href="https://lh3.googleusercontent.com/-GVj4XdjMHXc/UVlF9Ed4tVI/AAAAAAAACmA/NiBRgulbbHM/s800/P3310427.JPG" title="">
MÄRZ 2020
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-pFxdHe11o1Y/UVlLV1B9fDI/AAAAAAAADI8/fZIoGDn3hUU/s800/P3310491.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-QnJsB-NY5dY/UVlCWcrjZpI/AAAAAAAACbI/fnax1IA0Vhg/s800/P3300331.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-Z4aU260dS-0/UVlBEmLmeYI/AAAAAAAACU4/q3VsBtG8GZE/s800/P3300280.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-6jKjxh3u9Jc/UVk-DYdKGNI/AAAAAAAACRw/pSOwBwWE1n0/s800/P3290252.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-qqm4FqSzxrk/UVk-EoUz8kI/AAAAAAAACR4/fUSiuFEY5sw/s800/P3290253.JPG" title="" rel="g0">
</a>
</div>

Alles anzeigen

Segelyacht Nanumea · 30. Juni 2015

Mario - Du bist der Held des Tages,

ganz herzlichen Dank, werde das mal ausprobieren aber genauso hatte ich es mir vorgestellt...

Gawainos · 30. Juni 2015

Hi Edip,

darf ich dir noch einen Tipp geben? Immer wenn ich einen Link deiner Site, der "nach draußen" führt, benutze, öffnet sich die Zielseite im selben Fenster, in der eben noch deine Site gewesen ist.
Heißt, ich verlasse deine Website. Finde ich nicht so gut, da ich ja mehr von deiner Site sehen will und nicht immer "zurück" switchen möchte.
Habe ich mich unklar genug ausgedrückt? :o)

Segelyacht Nanumea · 30. Juni 2015

Hallo Gawainos,

Danke für den Tipp, wird natürlich so schnell wie möglich korrigiert, ich hoffe ansonsten gefällt Dir die Seite, soll quasi so eine Art Logbuch für Freunde Verwandte etc. sein um unsere Reisen zu verfolgen...

Gawainos · 30. Juni 2015

Ich beneide euch...

Jochen · 30. Juni 2015

Halo Edip,

also irgendwas stimmt auf deiner Seite nicht.

Bei mir wird im Firefox, Google Chrome und Opera auf allen Seiten ein roter Strich quer über den Bildschirm angezeigt (siehe Bild).
Beim IE hingegen taucht dieser "Strich" nicht auf"

Kann das mal bitte jemand "verifzieren"?...

ThM · 30. Juni 2015

Er muss mal aus meinem "Nach oben" Widget die Referenzlinie deaktivieren, dann ist der rote Strich auch weg.

-> Optionen
-> Darstellung
-> Overlay anzeigen auf "inaktiv" setzen

Jochen · 30. Juni 2015

Ah OK, dann hat sich ja das schon erledigt, was das Problem ist.
Muss jetzt halt nur noch der Edip korrigieren.

Segelyacht Nanumea · 30. Juni 2015

Leute ihr seit absolut genial,
ich liebe dieses Forum das mit der roten Linie hatte ich schon bemerkt, da der aber nur auf dem Ipad aufgetaucht ist, hatte ich es abgetan, jetzt weiß ich woran es liegt und kann das beheben, im Moment bin ich nur in den letzten Zügen mit den Vorbereitungen für unseren Ausstieg und habe absolut keine Zeit...

Segelyacht Nanumea · 30. Juni 2015

@Gawainos
beneiden musst Du uns nicht, dass ist sozusagen mein Lebenswerk, da habe ich mein Leben lang für gearbeitet, andere bauen sich Häuser ich habe die Nanumea gebaut

Segelyacht Nanumea · 30. Juni 2015

Danke Euch nochmals,

der Strich ist weg

Segelyacht Nanumea · 30. Juni 2015

Hallo Mario,
ich habe gerade mal die Testseite mit dem IPad durchgeklickt, der unterste Link den Du da drin hast, gefällt mir am besten, funktioniert mit dem IPad nicht, der einzige der auf dem IPad funktioniert, ist der mittlere.

Mario · 1. Juli 2015

Ja das liegt wohl am Widget Tab, oder daran das ich den gleichen Code mit der selben ID 2x eingebunden habe.

Ich finde die Lösung mit dem Tab eh nicht so richtig schön, würde das dann doch eher mit einem kleinem Vorschaubild darstellen. HIER

Du musst nur darauf achten das du den Galerien unterschiedliche IDs vergibst.
Beispiel 1. Galerie

Code

<div id="iga0" class="zpImageGallery" style="height:100px;
data-width="128"
data-height="72"
data-margin="10"
data-bordercolor="default"
data-borderwidth="0"
data-numbershow="0" 
data-titleshow="0"
data-titleposition="off"
data-transition="elastic"
data-inner-transition="white"
data-slideshow="0"
data-slideshowinterval="0"
data-lang="de">




<a class="fancybox" href="https://lh6.googleusercontent.com/-chjmak0R3ns/UYVkhjnBTKI/AAAAAAAADwI/uUHmOEsM8_k/w1024-h768-no/P5021523.JPG" title="" rel="g0">
Mai 2013
<img src="https://lh3.googleusercontent.com/QIp4deYZtxfxgslmdyvX2ixpwV_5dkxnRtXiZmjCAm0=w270-h202-p-no" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-RL2KEGuBR2I/UYVkjKvmMQI/AAAAAAAADwM/wDgdiC1s-hk/w1024-h768-no/P5021525.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-_YyPOW-0n8k/UYVkk9n-0-I/AAAAAAAADzs/sf4meeSKn6g/w1024-h768-no/P5021529.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh4.googleusercontent.com/-ZEc2NIQlDx8/UYVknm5CQuI/AAAAAAAADzo/VvwH1PJiG2A/w1024-h768-no/P5031530.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-S8r9HzUz9u0/UYVkqHX7mrI/AAAAAAAADz4/q_HxiGR8wFc/w1024-h768-no/P5031531.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-CfQ_lMAh43I/UYVksqCI7rI/AAAAAAAAD0A/bu5e2AxpTXk/w1024-h768-no/P5031535.JPG" title="" rel="g0">
</a>
</div>

Alles anzeigen

Beispiel 2. Galerie

Code

<div id="iga01" class="zpImageGallery" style="height:100px;
data-width="128"
data-height="72"
data-margin="10"
data-bordercolor="default"
data-borderwidth="0"
data-numbershow="0" 
data-titleshow="0"
data-titleposition="off"
data-transition="elastic"
data-inner-transition="white"
data-slideshow="0"
data-slideshowinterval="0"
data-lang="de">




<a class="fancybox" href="https://lh6.googleusercontent.com/-gbYSuQ_I4bs/UWEHZZMw8OI/AAAAAAAAC64/7sA0eUTQMqg/w800-h451-no/P3300326.JPG" title="" rel="g01">
April 2020
<img src="https://lh3.googleusercontent.com/oWpA5McFXCLksTThxJR1lFzqMza4ry0Jg3M8Q_75VKE=w338-h190-p-no" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-KuImbPSwM6U/UWJXD27rkoI/AAAAAAAAC68/HvRqrtXQ1V4/w800-h451-no/P4020534.JPG" title="" rel="g01">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-yYIT_9hF0SE/UWJXCsC_tYI/AAAAAAAAC3Q/t4Jc0Lc_4Uk/w800-h451-no/P3300321.JPG" title="" rel="g01">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-1aFW9vxx1HI/UWJXVmtNsEI/AAAAAAAAC7M/NIv_p_S-iPw/w800-h451-no/P4020652.JPG" title="" rel="g01">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-W7cmgt_MzbQ/UWJXqYCujZI/AAAAAAAAC4Y/uCsTT5b3R5s/w800-h451-no/P4030729.JPG" title="" rel="g01">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-CQ6kIfX-goA/UWJX1PKlzYI/AAAAAAAAC7g/UhD_lQVg47o/w800-h451-no/P4030755.JPG" title="" rel="g01">
</a>
</div>

Alles anzeigen

Segelyacht Nanumea · 2. Juli 2015

Hallo Mario,

danke Dir - ich probiere das am Wochenende einmal aus, mit den Tabs gebe ich Dir Recht, mit Vorschaubildern gefällt es mir auch besser...

Segelyacht Nanumea · 2. Juli 2015

Der Thread wurde verschoben...

Stefan S · 2. Juli 2015

Ich habe den thread in die Plauderecke verschoben, da es ja um Fremdcode geht und nicht um Bestandteile von Zeta Producer.

Segelyacht Nanumea · 3. Juli 2015

Kein Thema,
musste nur erst suchen wo er denn gelandet ist...

Segelyacht Nanumea · 6. Juli 2015

@ThM

Thomas ist dein Widget schon in Bearbeitung, dass wäre echt Klasse...

ThM · 6. Juli 2015

Hallo Edip ...

das Widget ist fertig. Ich dachte aber es hätte sich mit dem Code von Mario insoweit erledigt. Deswegen hatte ich dazu auch nichts weiter bemerkt.

^Du bekommst morgen im Laufe des Vormittag einen Link per E-Mail zugesandt wo Du eine Demo anschauen und das Widget ggf. herunterladen kannst.

Segelyacht Nanumea · 6. Juli 2015

Hallo Thomas,
das ist ja Klasse, mit deinem Widget wäre es für mich viel einfacher zu realisieren, da bin ich mal gespannt, danke Dir auf jeden Fall im Vorsus...

Segelyacht Nanumea · 9. Juli 2015

Hallo zusammen,
ich danke Euch allen, die mir hier geholfen haben, mein Projekt zu realisieren, ich habe jetzt meinen Account bei 1und1 geändert, habe jetzt unbegrenzten Webspace und werde somit die Fotoalben mit dem original von Zeta erstellen...

Wollen Sie eine professionelle Website erstellen?