Autor |
Nachricht |
-
heller-schmuckdesign
|
14.09.2009 um 20:33 (UTC) Titel: moving boxes - externe Galerie - wie geht das ? |
|
|
Hab das hier als Tipp bekommen:
http://css-tricks.com/examples/MovingBoxes/
Würde ich auch gerne anstatt meiner Galerie einrichten, ABER
Wie funktioniert das eigentlich ? Wie richte ich das ein ? ______________
|
|
↑
|
|
|
-
homepage-vergleich
|
14.09.2009 um 21:01 (UTC) Titel: Re: moving boxes - externe Galerie - wie geht das ? |
|
|
heller-schmuckdesign hat Folgendes geschrieben:
Das geht nur auf einem Webspace |
|
↑
|
|
|
-
heller-schmuckdesign
|
15.09.2009 um 15:03 (UTC) Titel: |
|
|
Ach wie doof ! Dass ist da ja wieder mit Kosten und Werbung verbunden
Hab ich denn sonst ne attraktive Alternative ? ______________
|
|
↑
|
|
|
-
heller-schmuckdesign
|
25.09.2009 um 17:11 (UTC) Titel: |
|
|
Weiss denn keiner Rat ? ______________
|
|
↑
|
|
|
-
the-fun-factory
|
25.09.2009 um 17:43 (UTC) Titel: |
|
|
Hi,
zuersteinmal danke für den Tip, das kann ich gut gebrauchen.
heller-schmuckdesign hat Folgendes geschrieben: Ach wie doof ! Dass ist da ja wieder mit Kosten und Werbung verbunden
Hab ich denn sonst ne attraktive Alternative ?
das stimmt so nicht. Es gibt auch kostenlose Anbieter, wie z.B. www.bplaced.net . Allerdings solltest du beachten, dass du das ganze nicht nur als Dateilager nutzen darfst, siehe auch: http://www.homepage-baukasten.de/forum/viewtopic.php?t=102727 .
Um es zu installieren tust du folgendes:
- Den zip File von http://css-tricks.com/moving-boxes/ herunterladen und entpacken.
- alle dateien hochladen.
- Dann fügst du folgendes bei Text überm Design ein:
Zitat: <link rel="stylesheet" href="http://adresse.de/css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="http://adresse.de/js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://adresse.de/js/slider.js" type="text/javascript" charset="utf-8"></script>
Die Links zu den entschrechenden Datein musst du anpassen.
- Achtung, jez wirds lang: Zitat:
<div id="wrapper">
<div id="slider">
<img class="scrollButtons left" src="http://adresse.de/images/leftarrow.png">
<div style="overflow: hidden;" class="scroll">
<div class="scrollContainer">
<div class="panel" id="panel_1">
<div class="inside">
<img src="http://adresse.de/images/1.jpg" alt="picture" />
<h2>Bildüberschrift</h2>
<p>Bildunterschrift</p>
</div>
</div>
</div>
<div id="left-shadow"></div>
<div id="right-shadow"></div>
</div>
<img class="scrollButtons right" src="http://adresse.de/images/rightarrow.png">
</div>
</div>
rot: Die Adressen zu einigen Bildern, die Sich im Ordner "images" befinden.
orange: Die Adressen zu den Bildern, die in der Box angezeigt werden soll. Wenn du ein weiteres Bild dazu haben wills, musst du bei
Zitat: <div class="panel" id="panel_1">
<div class="inside">
<img src="http://adresse.de/images/1.jpg" alt="picture" />
<h2>Bildüberschrift</h2>
<p>Bildunterschrift</p>
</div>
</div>
</div>
die grün markierte Zahl erhöhen.
Bei blau kannst du auchnoch etwas eingeben.
- Zum schluss alles im Editor unter "Quelltext "einfügen.
Ich hoffe, es war verständlich. Kann sein, dass ich was vergessen hab, da ich ja genau weiß, was ich da machen muss. Bei fragen meld dich einfach nochmal. ______________
Zuletzt bearbeitet von the-fun-factory am 25.09.2009, 18:45, insgesamt 3-mal bearbeitet
|
|
↑
|
|
|
-
heller-schmuckdesign
|
27.09.2009 um 20:28 (UTC) Titel: |
|
|
Oh, vielen Dank.
Ich werde mich dann mal die Tage dran machen....
Mal schauen, ob ich das hinbekommen ______________
|
|
↑
|
|
|
-
heller-schmuckdesign
|
30.09.2009 um 08:43 (UTC) Titel: |
|
|
So, habe nun angefangen.
Datei Download ok, entpackt, aber zum hochladen gab es da nichts ...
Was mir nun noch unklar ist, welche "adresse" ich bei den von dir rot markierten Links eintragen muss
Vll. ne kleine Info am Rand:
Alle Fotos, die in die Galerie rein sollen, sind bereits auf der Homepage in den verschiedenen Kategorien vorhanden. Ist also alles bei HBK hochgeladen.
Die Galerie soll jetzt also eine Art Überblick sein ______________
|
|
↑
|
|
|
-
the-fun-factory
|
30.09.2009 um 15:05 (UTC) Titel: |
|
|
Deine Dateien kannst du mit dem FTP - Programm "Filezilla" (einfach Googlen) auf den Server von Funpic, bplaced und co. hochladen.
In dem Odner "Moving Boxes" solltest du folgendes Finden:
- eine HTMLdatei names "index".
- 4 weitere ordner (images, css, js und design)
am besten lädst du den gesamten ordner ersteinmal unverändert hoch. Normalerweise sollte dann alles funktionieren.
Dann musst du nurnoch die Adressen anpassen:
Zitat: <link rel="stylesheet" href="http://adresse.de/css/style.css" type="text/css" media="screen" charset="utf-8">
hier musst du die Adresse zur css datei "style", die sich im Ordner "CSS" befindet, einfügen.
Dann bei Text über dem Design:
Zitat: <script src="Adresse zur JS Datei "jquery-1.3.1.min" im ordner "js" " type="text/javascript" charset="utf-8"></script>
<script src="Adresse zur JS Datei "slider" im ordner "js" " type="text/javascript" charset="utf-8"></script>
Danach die Grafiken. ganz oben die Adresse zur PNG Datei "leftarrow", dann zu "rightarrow". Diese Dateien kannst du theorethisch auch im HPBK hochladen.
Beim Orangen Feld trägst du die Bildadresse ein (http://img.webme.com...). ______________
Zuletzt bearbeitet von the-fun-factory am 30.09.2009, 16:06, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
heller-schmuckdesign
|
30.09.2009 um 20:49 (UTC) Titel: |
|
|
Ok, ich habs verstanden und auch genauso, wie du es erklärt hast, versucht, aber ich krieg es einfach nicht hin ! Irgendwie funktioniert das nicht.
Hab alles runtergeladen und mich angemeldet, aber das wird nichts ...
AAHHHHHHH .... $!"%(!"&//&§(!(§ .... ich könnte ....
Was mach ich denn jetzt ?
Meine Fotos habe ich schon alle nach dem Schema vorbereitet, aber keine Moving Boxes ohne Boxes .... ggggggggrrrrrr
Kann mir nicht irgendjemand diese Ordner hochladen und die Links schicken ? Ich werd noch bekloppt hier .... ______________
Zuletzt bearbeitet von heller-schmuckdesign am 30.09.2009, 22:00, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
the-fun-factory
|
01.10.2009 um 15:13 (UTC) Titel: |
|
|
ok, ich könnte dir anbieten, die Dateien bei mir hochzuladen. Dann brauchst du bei dir nurnoch die Codes einfügen.
Ich garantiere allerdings für nichts. Es kann vorkommen, dass ich mich daran nichtmehr erinnere und die Datei verschiebe oder lösche.
Bei Text über dem Design musst du dann folgendes einfügen:
Zitat: <link rel="stylesheet" href="http://ewaadmin2.ew.funpic.de/extern/MovingBoxes/MovingBoxes/css/style.css" type="text/css" media="screen" charset="utf-8">
und
Zitat: <script src="http://ewaadmin2.ew.funpic.de/extern/MovingBoxes/MovingBoxes/js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ewaadmin2.ew.funpic.de/extern/MovingBoxes/MovingBoxes/js/slider.js" type="text/javascript" charset="utf-8"></script>
so, der Code für die Boxen ist dann:
Zitat: <div id="wrapper">
<div id="slider">
<img class="scrollButtons left" src="http://ewaadmin2.ew.funpic.de/extern/MovingBoxes/MovingBoxes/images/leftarrow.png">
<div style="overflow: hidden;" class="scroll">
<div class="scrollContainer">
<div class="panel" id="panel_1">
<div class="inside">
<img src="http://adresse.de/images/1.jpg" alt="picture" />
<h2>Bildüberschrift</h2>
<p>Bildunterschrift</p>
</div>
</div>
</div>
<div id="left-shadow"></div>
<div id="right-shadow"></div>
</div>
<img class="scrollButtons right" src="http://ewaadmin2.ew.funpic.de/extern/MovingBoxes/MovingBoxes/images/rightarrow.png">
</div>
</div>
jezt musst du eigendlich nur die Bildadresse ändern.
Hoffe das funzt. Nachdem ich mal nen' Blick in die Quelltextte geworfen hab, bin ich mir da nichtmehr so sicher. ______________
|
|
↑
|
|
|
-
heller-schmuckdesign
|
01.10.2009 um 19:26 (UTC) Titel: |
|
|
Ja cool, vielen Dank !
Muss ich alles unter "Text über dem Design" eintragen ?
Wie und was gebe ich denn ein, damit die Galerie auch in der richtigen Seite erscheint ? ______________
|
|
↑
|
|
|
-
the-fun-factory
|
02.10.2009 um 11:19 (UTC) Titel: |
|
|
Die ersten beiden Codes beio Text überm Design: Zitat: <link rel="stylesheet" href="http://ewaadmin2.ew.funpic.de/extern/MovingBoxes/MovingBoxes/css/style.css" type="text/css" media="screen" charset="utf-8"><script src="http://ewaadmin2.ew.funpic.de/extern/MovingBoxes/MovingBoxes/js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ewaadmin2.ew.funpic.de/extern/MovingBoxes/MovingBoxes/js/slider.js" type="text/javascript" charset="utf-8"></script> . Danach nimmst du diesen und fügst ihn in den Quelltext der Seite ein, auf der er angezeigt werden soll: Zitat: <div id="wrapper">
<div id="slider">
<img class="scrollButtons left" src="http://ewaadmin2.ew.funpic.de/extern/MovingBoxes/MovingBoxes/images/leftarrow.png">
<div style="overflow: hidden;" class="scroll">
<div class="scrollContainer">
<!--Bilderbox-->
<div class="panel" id="panel_1">
<div class="inside">
<img src="http://adresse.de/images/1.jpg" alt="picture" />
<h2>Bildüberschrift</h2>
<p>Bildunterschrift</p>
</div>
</div>
<!--Bilderbox ende-->
<!--Hiernach können weitere Bilder hinzugefügt werden-->
</div>
<div id="left-shadow"></div>
<div id="right-shadow"></div>
</div>
<img class="scrollButtons right" src="http://ewaadmin2.ew.funpic.de/extern/MovingBoxes/MovingBoxes/images/rightarrow.png">
</div>
</div>
Dort musst du nurnoch die Bildadresse eintragen. Das Fett markierte musst du kopieren und Dahinter einfügen. Du musst dann nur die Grüne Zahl erhöhen. ______________
Zuletzt bearbeitet von the-fun-factory am 02.10.2009, 12:21, insgesamt 2-mal bearbeitet
|
|
↑
|
|
|
-
heller-schmuckdesign
|
|
↑
|
|
|
-
the-fun-factory
|
05.10.2009 um 16:34 (UTC) Titel: |
|
|
Aber immerhin funktioniert der Scrolleffekt
Ok, gib mir mal die adressen von allen bildern, die du da drain haben möchtest und lösche den code, den du jezt drin hast. Ich stelle dir dann alles ein, damit es funktioniert. ______________
|
|
↑
|
|
|
-
heller-schmuckdesign
|
06.10.2009 um 10:10 (UTC) Titel: |
|
|
Aber nur der Scrolleffekt auf der linken Seite !
Ich hab die Bild-Adressen alle in des Schema eingefügt. Willst du das kompl. Schema oder nur die Bildadressen ? ______________
|
|
↑
|
|
|
|