Allgemeines » Slideshow: Vorschaubilder vergrößern

20.05.2018 14:15

Milchkanne
#1

Guten Tag ihr alle! :)

Leider habe ich nur einen unbeantworteten Beitrag im Forum gefunden, daher stelle ich die Frage einmal direkt: Wie kann ich die Vorschaubilder der Slideshow mit CSS verändern, sodass sie mindestens doppelt so groß sind (am besten Pixelangaben)?

PS: Bin CSS-Anfänger aber lernfreudig. ;)

Beste Grüße und ein entspanntes Wochenende

Antworten

Beitrag melden

#2

24.05.2018 10:15

az_
#2

az_

...das geht leider gar nicht. Du kannst sie aber ausschalten.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#3

25.05.2018 18:11

Milchkanne
#3

Milchkanne

Vielen Dank für deine Antwort, Andreas!
Hmm, das ist ja doof, weil sie doch arg klein sind. Und es gibt keinen Workaround? Weil die Bilder selbst kann ich über Chrome "ausfindig" machen � glaube ich zumindest ;).
Ansonsten muss ich mir wohl von Grund auf eine eigene Galerie basteln.

Danke nochmal und LG

Antworten

Beitrag melden

#4

26.05.2018 17:38 (zuletzt bearbeitet: 26.05.2018 17:43)

az_
#4

az_

ja, leider. Es gibt aber eine ganze Reihe guter Beispiele im Netz. Schau mal hier:

- https://bootsnipp.com/tags
- https://www.powr.io/tutorials/installier...ner-jimdo-seite
- https://www.redesign-berlin.de/jimdo-tut...dein-slideshow/

LG, az

PS: der Flexslider geht besonders einfach: http://flexslider.woothemes.com/thumbnail-slider.html

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#5

27.05.2018 09:30

Milchkanne
#5

Milchkanne

Ahh, super. Danke für die Links!
Den POWr-Slider finde ich tatsächlich schick und hatte ihn kurzfristig eingebunden, aber die Werbung ist natürlich blöd und Geld wollte ich für meine doch sehr einfach anmutende Galerie nicht ausgeben.
Bootsnipp hat auf den ersten Blick schonmal was dabei und der Flexslider aus dem PS: ist genau das was ich brauche (Mhmmm... Muffins!). Hoffe, ich komme mit den Codes klar. :D

Antworten

Beitrag melden

#6

12.06.2018 17:45

Milchkanne
#6

Milchkanne

Entschuldigung, dass ich euch hier mit 2 Themen auf einmal in Beschlag nehme, aber ich könnte meinen Kopp den lieben langen Tag auf die Tastatur hauen und muss bei den Slidern nachfragen.

Ich habe mich nun für den vorgeschlagenen Flexslider mit Thumbnails von Woo entschieden und nach der offiziellen Beschreibung gearbeitet: engl. Anleitung Flexslider
Den Code aus Step 1 und Step 3 habe ich also unter Einstellungen -> Header eingefügt. Bei Step 2 habe ich mir ein Widget/HTML Kästchen aufgemacht und dort den vorgegebenen Code eingesetzt. (Komischerweise wird immer wieder der <body>Tag entfernt, nachdem ich gespeichert habe) In Step 2 habe ich meine eigenen Bilder benutzt und entsprechend den src-Pfad geändert. Nun sollte alles klappen. ABER meine Bilder werden untereinander angezeigt und es gibt keine Animation.
Nachdem ich dann auf dieser Seite: deut. Anleitung FS eine ältere, deutsche Anleitung gefunden habe, ist mir aufgefallen, dass ich die "CSS- und JS-Datei nicht auf Jimdo verknüpft habe (in der englischen scheint man das aber auch nicht zu müssen). Also fix auf meiner versteckten Assets-Seite Downloads eingestellt und den src-Link im Header aktualisiert. Das wiederum zerschießt mir alles und ich habe lediglich einen weißen Streifen. Was mach ich denn falsch?

Headercode:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<link rel="stylesheet" href="flexslider.css" type="text/css" />
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 
<script src="jquery.flexslider.js"></script>
 
<script type="text/javascript" charset="utf-8">
//<![CDATA[
  $(window).load(function() {
    $('.flexslider').flexslider();
    controlNav: "thumbnails"
  });
//]]>
</script>
 

Bodycode: (warum nimmt mir das Widgetkästchen immer den Body-Tag weg?)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div class="flexslider">
    <ul class="slides">
        <li data-thumb="https://www.fabiennebethke.de/app/download/17219669125/test_1.jpg?t=1528812844">
            <img width="400" height="400" src="https://www.fabiennebethke.de/app/download/17219669125/test_1.jpg?t=1528812844" />
        </li>
 
        <li data-thumb="https://www.fabiennebethke.de/app/download/17219670325/test_2.jpg?t=1528812850">
            <img img="" width="400" height="400" src="https://www.fabiennebethke.de/app/download/17219670325/test_2.jpg?t=1528812850" />
        </li>
 
        <li data-thumb="https://www.fabiennebethke.de/app/download/17219670425/test_3.jpg?t=1528812858">
            <img img="" width="400" height="400" src="https://www.fabiennebethke.de/app/download/17219670425/test_3.jpg?t=1528812858" />
        </li>
    </ul>
</div>
 

Hier ist meine versteckte Unterseite (die kann man doch mit dem Link ansehen, oder? ^^): Testseite

Ich hoffe ihr könnt mir helfen!
Traurige, codehassende Grüße von Milchkanne

Antworten

Beitrag melden

#7

14.06.2018 02:35 (zuletzt bearbeitet: 14.06.2018 02:39)

az_
#7

az_

...das ist nicht der Link zu Deiner Testseite. Da musst Du uns schon den richtigen Link geben. (Besuchermodus)
...body ist reserviert und kommt auf einer Webseite nur 1x vor. Deshalb wird es automatisch entfernt, wenn Du es in ein Widget packst.

Mein Tipp gegen Frustration: klein anfangen, Flexslider ist eigentlich nix für Anfänger.

Aber schau Dir mal die Quelle Deines "jquery.flexslider.js" an: da ist nix. Du musst die js-Datei schon zur Verfügung stellen. Also hochladen (Datei-Download-Element) und dann den ganzen Pfad der Quelle (src="...") angeben.

oder extern, z.B.:

1
 
<script type="text/javascript" src="https://redesign-berlin.lima-city.de/__js/jquery-flexslider-min.js"></script>

Ansonsten sieht Dein Script eigentlich gut aus. Nur das hier:

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
//<![CDATA[
  $(window).load(function() {
    $('.flexslider').flexslider();
    controlNav: "thumbnails"
  });
//]]>
</script>
 

...kommt nicht in den head, sondern angehängt an das html-Widget oder als eigenes Widget ganz unten im Content.

Anleitung s.h.:
- https://redesign-berlin-seminar.jimdo.co...der/flexslider/

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#8

14.06.2018 14:15 (zuletzt bearbeitet: 14.06.2018 14:17)

Milchkanne
#8

Milchkanne

Hallöchen Andreas,

danke, dass du mich noch nicht aufgegeben hast. ;)
Nachdem ein Kumpel meinen Header aufgeräumt hat und ich nun mit deiner Anweisung gearbeitet habe, klappt jetzt alles! Ich habe noch ein paar Dinge angepasst, wie Schnelligkeit, Thumbnails, Anhalten bei Aktion und Pfeile:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<p class="hide">
    init .flexslider (script)
</p>
<script type="text/javascript">
//<![CDATA[
  var $ = jQuery.noConflict();
    $(window).load(function(){
    $('.flexslider').flexslider({
        slideshowSpeed: 10000,
        pauseOnAction: true,
        directionNav: true,
        controlNav: "thumbnails"
    });
});
 
 !function(){ var regBuff = window.__regModuleBuffer = []; if(!window.jimdoGen002) { window.jimdoGen002 = {}; } if(!window.jimdoGen002.regModule) { window.jimdoGen002.regModule = function(){ var args = [].slice.call(arguments); regBuff.push(args); } } }();
 
    //]]>
 
</script>
 

Mir sind aber unerwünschte "abgeschnittene" Wörter (Previous und Next?) aufgefallen, die ich durch "prevText" und "nextText" nicht ausblenden konnte. Zumindest hat es nicht funktioniert "false" dahinter zu schreiben. Hier nun der Besuchermodus-Link: Testseite mit Slider
Falls das wieder nicht funktioniert gibt es einen Screenshot:

Falls du mich noch zu dieser Frage erhellen könntest, wäre ich dir sehr dankbar! (Wobei, das bin ich eh schon.)

Grüße von der Milchkanne

Antworten

Beitrag melden

#9

14.06.2018 16:21

az_
#9

az_

...das ist kein Besuchermodus-Link!

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#10

15.06.2018 09:02

Milchkanne
#10

Milchkanne

Entschuldige, ich weiß offensichtlich nicht was du meinst. Ich habe die Seite unten rechts über die Besucher-Ansicht geöffnet und diesen Link eingefügt. Wenn es das nicht ist, was dann?
Ich habe nun die Seite offengelegt, jetzt ist sie definitiv sichtbar: Testseite

Antworten

Beitrag melden

#11

15.07.2018 18:56 (zuletzt bearbeitet: 15.07.2018 19:00)

az_
#11

az_

Jetzt hast du es richtig gemacht! Der andere link geht nur auf die Anmeldungsseite von Jim do. Wenn du aber nicht mit deinen Login Daten angemeldet bist, kannst du die Webseite nicht sehen.

LG, AZ

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html