Slider - Vergrößerung durch anklicken in das Bild

Antworten
#1
06.12.2021 20:40 (zuletzt bearbeitet: 16.12.2021 11:50)
avatar  Perun
#1
Pe
Perun

Hallo zusammen!

zunächst vielen Dank für die hilfreiche Tipps in diesen Forum!

Leider konnte ich keine Lösung für mein Anliegen finden und hoffe jetzt auf hilfreichen Tipp.

Es geht um die Slider in der Bildgalerie. Leider werde ich mit den Bedienelementen des Sliders nicht warm . Durch stöbern im Forum, konnte ich die Pfeile (links, rechts) und den "Play-Button" verschwinden lassen. Den Button "Vergrößern" kriege ich leider nicht weg.

Hier meine Frage: gibt es die Möglichkeit, dass die Funktion, welche durch das Klicken auf den Kreuz aufgerufen wird (Bild vergrößern), durch ein Klick auf das ganze Bild ersetzt/erweitert werden kann. Also quasi die Funktion vom Kreuz auf das ganze Bild ausweiten, und das Kreuz verschwinden lassen?

Diesen Code habe ich für die Pfeile und Play-Button bereits im Einsatz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 

<style type="text/css">
/*<![CDATA[*/
    /* Pfeile Slider verbergen */
        .bx-controls-auto,
        .bx-controls-auto a,
        .bx-controls-direction a,
        .bx-controls-auto-item,
        .bx-pager-item {
            display:none;
    }
/*]]>*/
</style>
 
 



Hier unsere Webseite: leider darf ich noch keine Links posten. Wenn Interesse besteht, gerne im Google "beart berlin" eingeben.

https://www.beart.berlin/ (admin)

Besten Dank im Voraus!

LG, Pavel


 Antworten

 Beitrag melden
#2
07.12.2021 16:53 (zuletzt bearbeitet: 07.12.2021 17:03)
avatar  az_
#2
avatar
az_

Dazu kannst du einen eigenen Slider einsetzen. Mit sowas geht sowas. Beispiel:
- https://redesign-designtest-rome.jimdofree.com/proslider/ bzw.
- https://redesign-designtest-rome.jimdofr...der/beispiel-2/

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
07.12.2021 18:07
avatar  Perun
#3
Pe
Perun

Hi az,

Zunächst vielen Dank für die Rückmeldung! Die Slider sind schön, aber nicht ganz das was ich möchte. Dazu kommt der Zeitaufwand die Slider auf jeder Unterseite der Webseite zu ändern. Daher dachte ich, es gibt irgend ein Befehl, welcher sich nur auf die Slider bezieht und die Bilder der Slider durch Klick vergrößert bzw. den selben Effekt auslöst, wenn man auf den Kreuz klingt oder tippt.

Lg, Pavel


 Antworten

 Beitrag melden
#4
16.12.2021 12:32
avatar  az_
#4
avatar
az_

Hallo @Perun

...versuch mal dieses CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<style type="text/css">
/*<![CDATA[*/
 
    /* Slider-Controls verbergen */
        .bx-controls-auto,
        .bx-controls-auto a,
        /*.bx-controls-direction a,*/
        .bx-controls-auto-item,
        .bx-pager-item {
            display:none;
    }
 

    .cc-m-gallery-slider a.cc-m-gallery-slider-fullscreen:before {
        content:'';   
    }
 
    .cc-m-gallery-slider .bx-wrapper .bx-controls-auto a, 
    .cc-m-gallery-slider a.cc-m-gallery-slider-fullscreen,
    .cc-m-gallery-slider a.cc-m-gallery-slider-fullscreen:hover  {
        display: block;
        background-color: rgba(0,0,0,0);
        width:50%;
        height: 100%;
        top:0;
        left:25%;
        border-radius: 0;
    }
 
    
/*]]>*/
</style>
 


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
16.12.2021 21:08
avatar  Perun
#5
Pe
Perun

Danke, Danke, Danke, Danke!!! Es funktioniert prima! Kleiner Obolus ist auch raus! Schöne Feiertage!


 Antworten

 Beitrag melden
#6
18.12.2021 02:11
avatar  az_
#6
avatar
az_

Freude!!

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
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!