Suche im Forum:
Suchen


Autor Nachricht
Beitrag02.11.2017 um 20:12 (UTC)    
Titel: [erledigt] Bilder weiterblättern

Ich habe in meiner Homepage einige Seiten mit Bildern, die ich einzeln per Anklicken vergrößern kann.

Ich möchte nun gerne 2 Sachen, habe dafür mal eine kleine Testseite angelegt, damit man auf diese zugreifen kann. Diese lautet http://www.mein-melsbach.de/Test2.htm

Punkt 1: Wie kann ich erreichen, dass man die großen Bilder weiterschalten kann? Ich sehe das immer wieder mit Pfeilen rechts und links, aber wie geht das? Bisher muss ich jedes Mal mit der Zurück-Taste auf die kleinen Bilder zurück und dann wieder das nächste Bild anklicken.

Punkt 2: Ich möchte gerne, dass die Bild-Infos nach dem Anklicken in den großen Bildern erscheinen. Bisher erscheint diese Info nur, wenn ich mit der Maus beim kleinen Bild drüberfahre, nicht jedoch wenn ich das Bild angeklickt und vergrößert habe. Ich hätte aber gerne, dass diese Infos bei den großen Bildern erscheinen.

Das erste Bild enthält einen „Test-Text“ als Info, alle weiteren noch nicht.


Zuletzt bearbeitet von rund-um-schalke am 03.11.2017, 13:15, insgesamt einmal bearbeitet
Beitrag03.11.2017 um 01:36 (UTC)    
Titel:

Hallöchen Willi,

dafür gibt es folgendes Script, was du im Quelltext der Seite einfügen musst, ich markiere hier mal die Stellen die du individuell bearbeiten kannst (ACHTUNG: alles was ich hier rot dazugeschrieben habe, musst du natürlich aus dem Code entfernen bevor du ihn einfügst)
und diese Fotoshow funktioniert nicht mit Pfeilen, sondern mit den Befehlen "weiter" und "zurück" in Englisch:

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://wtheme.webme.com/js/thickbox.js"></script>
<link media="screen" type="text/css" href="https://theme.webme.com/designs/globals/thickbox.css" rel="stylesheet" />
<style type="text/css">
<!--

/* Aussehen Vorschaubild */
.bild {
width: 100px; BREITE DER VORSCHAUBILDER
height: 80px; HÖHE DER VORSCHAUBILDER
padding: 6px;
margin: 10px;
float: center;
box-shadow: 10px 10px 10px #000000;
border: 1px solid #000000; RAHMENSTÄRKE UND FARBE DER VORSCHAUBILDER
border-radius: 10px 10px 10px 10px; ABGERUNDETE ECKEN DER VORSCHAUBILDER
}

/* Textgröße bei Blätterfunktion */
#TB_secondLine {
font-size: 14px; SCHRIFTGRÖßE
font-weight:bold; FETT oder nicht dann löschen
font-family:century gothic; SCHRIFTART
font-style:italic; KURSIV oder nicht dann löschen
color: #000000; SCHRIFTFARBE
}

/* Linkfarbe Blätterfunktion */
#TB_secondLine a { color: #0003a6!important;}

#TB_caption {
bottom: 0px;
left: 15px;
position: absolute;
background: #c88958; HINTERGRUNDFARBE DER INFO
border-radius: 0px 0px 0px 0px;
font-size: 14px; SCHRIFTGRÖßE DER INFO
font-weight:bold; FETT oder NICHT dann löschen
font-family: century gothic; SCHRIFTART DER INFO
font-style:italic; KURSIV oder NICHT dann löschen
color: #000000; SCHIFTFARBE
}

--></style>
<div style="text-align: center;">
<a title="BILDINFO" class="thickbox" href="https://...DEINE BILDADRESSE 1. BILD" rel="gallery-plants"> <img width="100" height="60" class="bild"alt="" src="https://...DEINE BILDADRESSE 1. BILD" /></a>
<a title="BILDINFO" class="thickbox" href="https://...DEINE BILDADRESSE 2. BILD" rel="gallery-plants"> <img width="100" height="60" class="bild"alt="" src="https://...DEINE BILDADRESSE 2. BILD" /></a>
<a title="BILDINFO" class="thickbox" href="https://...DEINE BILDADRESSE 3. BILD" rel="gallery-plants"> <img width="100" height="60" class="bild"alt="" src="https://...DEINE BILDADRESSE 3. BILD" /></a>
<a title="BILDINFO" class="thickbox" href="https://...DEINE BILDADRESSE 4. BILD" rel="gallery-plants"> <img width="100" height="60" class="bild"alt="" src="https://...DEINE BILDADRESSE 4. BILD" /></a>
</div>

das Script lässt sich beliebig lang erweitern indem du diesen Teil einfach sooft kopierst und wieder einfügst wie du Bilder hast:

<a title="BILDINFO" class="thickbox" href="https://...DEINE BILDADRESSE 4. BILD" rel="gallery-plants"> <img width="100" height="60" class="bild"alt="" src="https://...DEINE BILDADRESSE 4. BILD" /></a>

hier mal eine DEMO zur Ansicht:
Arrow http://www.klein-paris.eu/Testseite.htm
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur


Zuletzt bearbeitet von klein-paris am 25.05.2018, 16:49, insgesamt 7-mal bearbeitet
Beitrag03.11.2017 um 12:13 (UTC)    
Titel:

Hallo Conny,

Super und mal wieder vielen vielen Dank. Es ist genau das, was ich suche, habe es schon mal kurz getestet.

Werde es zwar hier und da ändern müssen, da ich manchmal einen sehr langen Text als Erklärung habe, aber das ist ja nur noch ein Fleißaufgabe.

Ich danke dir sehr, schöne Grüße aus dem Rheinland nach Leipzig.

Willi

Very Happy Very Happy Very Happy
Beitrag03.11.2017 um 12:17 (UTC)    
Titel:

huhu, ja ich hab mal geschaut, man sollte allerdings natürlich keine Romane in die Info schreiben Wink Very Happy
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur
Beitrag06.11.2017 um 06:02 (UTC)    
Titel:

Ich muss aber doch den Leuten erklären, um was es sich dabei handelt. Denn ansonsten sehen sie zwar schöne Bilder, wissen aber damit nichts anzufangen.
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de