Danke,
ich möchte:
https://www.w3schools.com/howto/howto_js_lightbox.asp
in https://tympanus.net/Development/DraggableDualViewSlideshow/ integrieren, so dass pro Unterseite getrennte Carousels möglich sind.
Beiträge von judoe007
-
-
Guten Tag,
unten folgen die Formeln für meine spezielle Slideshow. Meine Frage dazu: Was muss ich ändern, damit die Slidesshows getrennt sind, das heißt statt eine Serie aus den Bildern 1-10 zwei Serien zu machen in Serie 1: 1-5 und Serie 2: 6-10?
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<body>
<img src="./richtige/1b.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
<img src="./richtige/2b.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
<img src="./richtige/3b.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
<img src="./richtige/4b.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
<img src="./richtige/5b.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow cursor">
<img src="./richtige/6b.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow cursor">
<img src="./richtige/7b.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow cursor">
<img src="./richtige/8b.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow cursor">
<img src="./richtige/9b.jpg" onclick="openModal();currentSlide(9)" class="hover-shadow cursor">
<img src="./richtige/10b.jpg" onclick="openModal();currentSlide(10)" class="hover-shadow cursor">
<div class="mySlides">
<div class="numbertext">1 / 84</div>
<img src="./richtige/1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 84</div>
<img src="./richtige/3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 84</div>
<img src="./richtige/Gäste/4.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 84</div>
<img src="./richtige/Gäste/5.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 84</div>
<img src="./richtige/Gäste/6.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 84</div>
<img src="./richtige/7.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">7 / 84</div>
<img src="./richtige/8.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">8 / 84</div>
<img src="./richtige/9.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">9 / 84</div>
<img src="./richtige/10.jpg" style="width:100%">
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script></body>
-
Guten Tag,
auf dem folgenden Link gibt es eine wunderbare Animation. Wenn ich allerdings den Code herunterlade, "download Source", ex auspacke und im Chrome ansehen möchte, sehe ich nur den weißen Browser. Was muss ich bei template/public/index.html verändern/hinzufügen, außer favicon.ico?
-
Ich meine das Weiterschalten mit der Pfeiltaste, dass man mit solch einer auch nach links und rechts schalten kann. Personen, die die Seite nicht kennen, wissen ja nicht wie man den restlichen Inhalt sieht. Die Intelligenz ist ja bei einigen beschränkt.
-
Nun habe ich doch noch eine Frage: Wie kann ich im oberen Bereich einen Pfeil nach links und einen nach rechts einbauen, so wie er bereits im oberen Bereich unten existiert? Es läuft ja quasi wie die HTML-Präsentationen.
-
PERFEKT. vielen dank
-
also, ich habe jetzt den code in alle 5 css-Dateien eingebaut. nichts klappt. Könnten Sie die Datei hochladen? Wenn ich es ins html Head lege passiert auch nichts
-
Ok. Im html bleibt der Befehl aber unverändert?
-
Da es verschiedene Bilder sind werde ich es in das HTML einbinden. Nur wo muss dann der Name des Bildes hin?
-
Ok. Werde mich informieren. Ist denn die Zeichensetzung Ihres Befehls korrekt? Fehlt da nicht irgendwo ein < >.?
-
folgendes klappt nicht:
<div class="content" data-content="content-2">
<h2>Round Table <span>King Arthur's creative team techniques</span></h2>
<div[data-content="content-2"]>
<img src="img/1.jpg" alt="img2" />
width: 50%;
height: auto;
}
</div>
-
Soweit nur noch eine Frage:
wie kann ich das Bild der Bildschirmgröße anpassen, wie es bei den slidern ist? Bei <div class="img-wrap> zeigt er es sehr sehr klein an beziehungsweise ändert die Größe nicht mit.
-
klappt. danke
-
Selber hinzugefügt. Er nimmt unten keine Bilder an
-
Ok. Nur klappt leider jetzt der Befehl:
<div class="content" data-content="content-2">
<img src="./Hover Effect Ideas _ Set 2_files/24.jpg" alt="img24">
<h2>Round Table <span>King Arthur's creative team techniques</span></h2>
<p>Passing......</p>
</div>
nicht mehr, bzw. es wird nur "img24"angezeigt,
-
PERFEKT. VIELEN VIELEN DANK
Nur eine Frage noch:
Wenn ich in die Seiten darunter sehe, ist auch das Herz zu sehen. Mal oben, mal unten, ganz anders als die Maus.
Es darf nur auf den Hauptseiten zu sehen sein/den oberen Abschnitten(slide)
-
Vielen Dank vorab
-
Es muss sliden,
Mit jedem canvas habe ich schon versucht.
Ich versuchte mehrfach auf jeder Unterseite ein Canvas einzubauen, doch schaffte ich nur eines. WIe kann ich pro Unterseite ein Canvas einrichten? Ich versuchte es mit let canvas = document.getElementById('Hannibal'); let canvas = document.getElementById('Hannibal2');let canvas = document.getElementById('Hannibal3');
sowie sämtlichen Möglichkeiten im html scipt
-
Danke. Nein, leider klappt das nicht. Es soll in folgendes Beispiel integriert werden:
https://tympanus.net/codrops/2…able-dual-view-slideshow/
Daran habe ich mich bereits gestern verbissen.
Wenn es in der Header kommt ist alles rot.
Wenn es in den Body kommt klappt es nur auf einer Seite, nicht gleichzeitig auf mehreren!
Falls es nicht machbar ist, dieses durchsichtig zu machen:
wie kann ich dieses Herz auf allen Oberseiten anzeigen lassen? Es klappt immer nur auf einer. Unter:
Zitatlet canvas = document.getElementById('Hannibal');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let ctx = canvas.getContext('2d');
Zwar kann ich das Canvas beliebig benennen. Aber insgesamt geht nur ein einziges Canvas auf den Seiten der id=slideshow
-
Guten Tag,
wie kann ich folgendes Fenster durchsichtig machen, so dass man bspw. ein Bild als Hintergrund nehmen kann?