Adventskalender

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hallo und guten Abend,
    nun etwas mehr Info wäre doch ganz gut, und wie Du Dir dies vorstellst. Nun gehen wird es schon, aber sicher nur mit HTML 5, weil du ja sicher haben willst das die Kalendertürchen zum aufmachen sind. Falsch kannste Vergessen. Also bleibt Dir nur HTML 5 übrig. Haste schon versucht im Netz zu suchen? Die zweite Möglichkeit wäre einen zu erstellen via Bild Datei das dann du jedes mal ein Türchen öffnest und dann es jeden tag neu hoch ladest. Was aber etwas umständlich ist. Aber gehen wird es.
    Lg.
    Thabo-Umasai
    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."
    ;)
  • Muss ehrlich sagen, eigentlich ist es mir egal wie er aussieht.

    Super wäre es schon, wenn es zum aufmachen gehen würde (aber nicht alle auf einmal), was noch toll wäre, wenn er auf meiner Homepage wäre und nicht verlinkt auf eine andere.

    Es sollte einfach etwas Weihnachtliches geben, die Schneeflocken hab ich schon.
  • Wie gesagt dann versuche mal Dein Glück im Netz gibt sicher etwas freies, hab da kurz geschaut und einiges gefunden. :thumbup:
    Lg.
    Thabo-Umasai
    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."
    ;)
  • Hallo Reini
    Leider bin ich nur am Handy da, aber Google mal nach "Adventskalender in Homepage einbauen"

    Da sollte dann ein link zu "xobor" sein- kostenloser Adventskalender von Xobor"
    Nur als Beispiel.
    Da hast unterhalb auch dasbscript und Anleitung.

    Ohne Gewähr.
    Bernie

    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."

    :thumbsup:
  • Hi !

    Hab mir auch ein kleines Skript angeschaut und ausprobiert ! Ist zwar noch nicht perfekt aber anschaubar ! Bei diesem Skript kann man nur den aktuellen Dezember Tag aufmachen !

    Also erst morgen ;) ! Man wird beim anklicken der Fenster auf eine andere Seite weitergeleitet ! (Die ersten 4 sind belegt)

    Hier zum Test LINK

    und HIER das xobor Skript !

    P.S. (wer weis wo der xobor Backlink versteckt ist darf ein Fenster aufmachen [img]wcf/images/smilies/evil.gif[/img] )
    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von andy67 ()

  • Na bitte @andy67 hilft wieder aus der Suchmisere heraus. :thumbsup:
    Lg.
    Thabo-Umasai
    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."
    ;)
  • Muss ich Euch recht geben der von Xobor sieht gut aus und lässt sich sicher noch gut anpassen. Danke @bernie für den Tipp. ;)
    Lg.
    Thabo-Umasai
    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."
    ;)
  • Guten Morgen

    Ich habe auf Kundenwunsch beim Gregor auch einen Adventkalender eingebaut. Denn vom Xobor.

    Doch nun möchte ich den testen, ob er auch eine Seite der Page aufmacht. Doch geht erst ab Dezember. Nun meine Frage an die Profis- wo kann ich zumindest für den 1. 12. umstellen damit ich heute schon testen kann?

    Die idee ist vom Gregor, jeden Tag ein anders Schmuckstück seiner Verkaufsgalerie vorszustellen und zu verkaufen.Jeden Tag ein Prozent mehr Nachlass.

    Script:

    Quellcode

    1. <script>
    2. window.onload = function() {
    3. try {
    4. $('#innerCal');
    5. colorbox();
    6. adjs();
    7. } catch (e) {
    8. var script = document.createElement("script");
    9. script.setAttribute('type','text/javascript');
    10. script.src='http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js';
    11. document.getElementsByTagName("head")[0].appendChild(script);
    12. colorbox();
    13. adjs();
    14. }
    15. };
    16. function colorbox() {
    17. var cbox = document.createElement("script");
    18. cbox.setAttribute('type','text/javascript');
    19. cbox.src='http://img.homepagemodules.de/ds/static/aktionen/adventskal/js/jquery.colorbox-min.js';
    20. document.getElementsByTagName("head")[0].appendChild(cbox);
    21. }
    22. function adjs() {
    23. var ajs = document.createElement("script");
    24. ajs.setAttribute('type','text/javascript');
    25. ajs.src='http://img.homepagemodules.de/ds/static/aktionen/adventskal/js/advCal_1.js.js';
    26. document.getElementsByTagName("head")[0].appendChild(ajs);
    27. }
    28. </script>
    29. <link rel="stylesheet" href="http://img.homepagemodules.de/ds/static/aktionen/adventskal/css/colorbox_1.css" />
    30. <script>
    31. //############ CONFIG START ##############
    32. // URL zum Hintergrundbild des Kalenders
    33. var backgroundImg = " http://www.dergoldschmied.at/images/weihnachten1.jpg";
    34. // Was fuer eine Grafik soll als Vorschau angezeigt werden, wenn sich im Tuerchen ein YoutubeVid statt eines Bildes befindet
    35. var videoPrevBackground = " http://www.bilder-hochladen.net/files/k75p-2-c81e.jpg";
    36. var videoW = "800"; // Breite des Videofensters
    37. var videoH = "600"; // Hoehe des Videofensters
    38. // Hintergrundfarbe definieren. ACHTUNG! Macht nur Sinn, wenn der Kalender auf einer extra Seite eingebunden wird!
    39. var backgroundIMG = "";
    40. var width = "945"; // Kalenderbreite
    41. var height = "600"; // Kalenderhoehe
    42. // Wenn der Kalender abgerundete Ecken besitzen soll, dann hier in Wert angeben. Ansonsten hier einfach 0 eiintragen
    43. var borderRadius = "5px";
    44. // Zeichnet den Hintergrund weich.
    45. // Funktioniert aktuell nur im Chrome und Safari und eventuell in kommenden Browserversionen des IE und FF
    46. // "true" fuer Ja und "false" fuer nein
    47. var blur = "false";
    48. // Um ein einfaches Bild fuer den jeweiligen Tag einzufuegen, einfach die direkte URL (Adresse) zum Bild eintragen.
    49. // Fuer ein YoutubeVideo die Zwoelfstellige Video ID (ohne http://youtube.com usw.!) eintragen ... z.B. y2T6qekeqlk
    50. // WICHTIG! Die Zaehlung der Tage, beginnt bei 0! Sprich der 1. Dezember = dayImgs[0] ... der 24. ist demzufolge dayImgs[23]
    51. var dayImgs = new Array();
    52. dayImgs[0] = "http://www.dergoldschmied.at/advent/img4721.jpg";
    53. dayImgs[1] = "http://www.bilder-hochladen.net/files/jtlt-q-4e73.jpg";
    54. dayImgs[2] = "http://www.bilder-hochladen.net/files/jtlt-u-3417.gif";
    55. dayImgs[3] = "http://www.bilder-hochladen.net/files/big/jtlt-v-c16a.jpg";
    56. dayImgs[4] = "http://www.bilder-hochladen.net/files/jtlt-w-6364.jpg";
    57. dayImgs[5] = "1u-fq4zcbj4";
    58. dayImgs[6] = "http://www.bilder-hochladen.net/files/jtlt-15-d645.png";
    59. dayImgs[7] = "http://www.bilder-hochladen.net/files/jtlt-19-f717.png";
    60. dayImgs[8] = "http://www.bilder-hochladen.net/files/big/jtlt-x-182b.jpg";
    61. dayImgs[9] = "http://www.bilder-hochladen.net/files/big/jtlt-y-e369.jpg";
    62. dayImgs[10] = "http://www.bilder-hochladen.net/files/jtlt-18-17e6.png";
    63. dayImgs[11] = "MEEg8bIjcWg";
    64. dayImgs[12] = "http://www.bilder-hochladen.net/files/jtlt-10-1c38.jpg";
    65. dayImgs[13] = "http://www.bilder-hochladen.net/files/jtlt-11-19ca.jpg";
    66. dayImgs[14] = "http://www.bilder-hochladen.net/files/jtlt-12-a5bf.jpg";
    67. dayImgs[15] = "http://www.bilder-hochladen.net/files/jtlt-16-3416.png";
    68. dayImgs[16] = "8LZpBjnOMYY";
    69. dayImgs[17] = "http://www.bilder-hochladen.net/files/jtlt-1a-6c83.png";
    70. dayImgs[18] = "http://www.bilder-hochladen.net/files/big/jtlt-13-a577.jpg";
    71. dayImgs[19] = "http://www.bilder-hochladen.net/files/jtlt-14-d67d.jpg";
    72. dayImgs[20] = "http://www.bilder-hochladen.net/files/jtlt-17-a1d0.png";
    73. dayImgs[21] = "http://www.bilder-hochladen.net/files/jtlt-t-6ea9.jpg";
    74. dayImgs[22] = "Z7PMzUgbc0E";
    75. dayImgs[23] = "http://www.bilder-hochladen.net/files/jtlt-s-33e7.jpg";
    76. //############ CONFIG END ##############
    77. var offset = 1;
    78. </script>
    79. <style type="text/css" title="text/css">
    80. #cboxOverlay{background:url(http://img.homepagemodules.de/ds/static/aktionen/adventskal/images/overlay.png) repeat 0 0;}
    81. #containerCal {
    82. width: 320px;
    83. height: 240px;
    84. margin: auto;
    85. position:relative;
    86. display:none;
    87. }
    88. #Adfooter {
    89. display:none;
    90. bottom:7%;
    91. margin:auto;
    92. right: 10%;
    93. position: absolute;
    94. color:white;
    95. font-size: 10px;
    96. text-align: right;
    97. }
    98. #Adfooter a {
    99. color:white;
    100. font-size: 10px;
    101. }
    102. #innerCal {
    103. width: 100%;
    104. height: 100%;
    105. margin: 0 auto 0 auto;
    106. padding-top: 2%;
    107. padding-bottom: 2%;
    108. padding-left: 5%;
    109. padding-right: 5%;
    110. position:relative !IMPORTANT;
    111. }
    112. #mybg {
    113. position: absolute !IMPORTANT;
    114. top: 0px;
    115. left: 0px;
    116. width: 100%;
    117. height: 100%;
    118. filter: blur(5px);
    119. }
    120. .door {
    121. background-image: url(http://files.homepagemodules.de/b2001010/a_96.png);
    122. width: 9.5%;
    123. height: 15%;
    124. float: left;
    125. margin-top: 3%;
    126. margin-right: 5%;
    127. padding-left: 1%;
    128. padding-top: 1%;
    129. color: white;
    130. text-align:left !IMPORTANT;
    131. font-weight: bold;
    132. border: 1px dotted white;
    133. cursor:pointer;
    134. }
    135. .door:hover {
    136. background-color: #E90000;
    137. opacity: 0.7;
    138. }
    139. </style>
    140. <div id="containerCal">
    141. <img src=" " id ="mybg" />
    142. <div id="innerCal">
    143. <div id="16" class="door" onclick="checkDateAndAction(16);">16</div>
    144. <div id="3" class="door" onclick="checkDateAndAction(3);" >3</div>
    145. <div id="12" class="door" onclick="checkDateAndAction(12);">12</div>
    146. <div id="5" class="door" onclick="checkDateAndAction(5);">5</div>
    147. <div id="20" class="door" onclick="checkDateAndAction(20);">20</div>
    148. <div id="7" class="door" onclick="checkDateAndAction(7);">7</div>
    149. <div id="13" class="door" onclick="checkDateAndAction(13);">13</div>
    150. <div id="8" class="door" onclick="checkDateAndAction(8);">8</div>
    151. <div id="21" class="door" onclick="checkDateAndAction(21);">21</div>
    152. <div id="9" class="door" onclick="checkDateAndAction(9);">9</div>
    153. <div id="10" class="door" onclick="checkDateAndAction(10);">10</div>
    154. <div id="14" class="door" onclick="checkDateAndAction(14);">14</div>
    155. <div id="24" class="door" onclick="checkDateAndAction(24);">24</div>
    156. <div id="15" class="door" onclick="checkDateAndAction(15);">15</div>
    157. <div id="1" class="door" onclick="checkDateAndAction(1);">1</div>
    158. <div id="17" class="door" onclick="checkDateAndAction(17);">17</div>
    159. <div id="4" class="door" onclick="checkDateAndAction(4);">4</div>
    160. <div id="18" class="door" onclick="checkDateAndAction(18);">18</div>
    161. <div id="6" class="door" onclick="checkDateAndAction(6);">6</div>
    162. <div id="19" class="door" onclick="checkDateAndAction(19);">19</div>
    163. <div id="22" class="door" onclick="checkDateAndAction(22);">22</div>
    164. <div id="2" class="door" onclick="checkDateAndAction(2);">2</div>
    165. <div id="23" class="door" onclick="checkDateAndAction(23);">23</div>
    166. <div id="11" class="door" onclick="checkDateAndAction(11);">11</div>
    167. </div>
    168. </div>
    Alles anzeigen
    Hier noch der L I N K zur Seite.
    Bernie

    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."

    :thumbsup:
  • Das Problem bei dem Skript ist, dass es so gemacht wurde von dem Ersteller, dass es die Skripte erst von dem Server ladet wenn es gestartet wird. Das heißt, das eingebundene Advent-Skript wird per eigenes Skript geladen, und kann deshalb nicht verändert werden. Wenn dann müsstest du das Adventskript runterladen...verändern und dann im eingebundenen Skript auf dein neu gespeichertes Skript laden lassen. Ich glaube zu kompliziert für dich.
    Ich hatte voriges Jahr mal ein Weihnachtstemplate hier zum laden reingestellt wo so ein ähnliches Skript eingebaut ist. Weihnachtstemplate Gemeinschaftsproduktion sieht dann so aus ...http://www.webdesign-markersdorf.at/weihnacht/advent.html

    Aber mal für dich leichter... wenn du deine PC Uhr auf Dezember stellst müsste es doch offline gehen oder ?
    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !
  • Guten Morgen Andy

    Die Idee war gut mit dem Datum. Schreibe eigentlich erst in drei Wochen...


    Also:

    Funktionieren tut das ganze, mit 1. Dezember habe ich eine Seite eingebaut wo das Fenster hinleiten soll- anstat nur einem Foto.

    Doch ist dann die Menüleiste doppelt da. Wenn ich auf anders Datum klicke, wo nur ein Foto eingebaut ist, kommt auch die Menüleiste der Webseite..

    Siehe Bild 1 ( Bildverlinkung)

    Bild 2 ( Seitenverlinkung)

    Kann ich das wo anders einstellen?

    Bei der Webseitenverlinkung habe gar nur eine Seite ohne Template erstellt, sieht dann aus, wie im Bild 4.


    Wie ist das bei Deinem Code?

    Würde in Dir, wenn es so geht wie gewünscht auch abkaufen, keine Frage.

    Nochmals die Idee vom Gregor: Jedes Türchen soll vom 1. - 24. Dezember mit einem Artikel aus seiner Verkausgalerie verlinkt werden. Am 1. gibt es 1%, am 15. gibt es 15% und am 24. eben 24%. So seine Idee.

    Geht das ?

    Nachtrag- soe wie im Bild 3 sollte es aussehen- die Seite von der Galerie kopiert und ohne Template erstellt...
    Dateien
    • 1.JPG

      (135,24 kB, 4 mal heruntergeladen, zuletzt: )
    • 2.JPG

      (192,57 kB, 4 mal heruntergeladen, zuletzt: )
    • 3.JPG

      (135,77 kB, 5 mal heruntergeladen, zuletzt: )
    • 4.JPG

      (223,94 kB, 4 mal heruntergeladen, zuletzt: )
    Bernie

    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."

    :thumbsup:
  • ICh glaube dieser Kalender ist eher aufgebaut für Grafiken und Youtube Videos die in einem vordefinierten Fenster eingeblendet werden. Ein Seite zu nehmen wir schwierig werden. Die Grafiken musst du jedenfalls verkleinern und vielleicht verlinken auf die Aktionsseite !

    HAb mein Skript ein bisschen angepasst und kann auf Seiten auch zugreifen ! Allerdings muss man die Grafiken die man einbindet vorher anpassen. Die Ziffen sind leider auch nicht zufällig sondern nach der Reihe !
    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von andy67 ()

  • hallo
    Wenn du mir sagst, wie ich die Grafiken nach dem verkleinern auf die Aktions- kaufseite bringe, dann passt es schon.

    Obwohl, anders gibt es keine Chancen?

    Oder gibt es da noch was anderes?
    Weiss wer bescheid zufallig?

    Danke bitte,...

    Auch gegen gegenseitige Hilfe oder cash
    Bernie

    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."

    :thumbsup:
  • Ich hab versucht (bei deinem Skript) die Grafiken zu verlinken die im Popup aufgehen, aber da dürfte das Skript dazwischenfunken ! Soweit gehen dann meine JS KEnntnisse auch nicht. Vielleicht kann da ein JS Profi helfen !

    Bei meiner Version muss ich es erst testen, aber das ist ein Wochenend Job ! Ich sag dir bescheid ob ichs hinbekommen habe !
    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !