Beiträge von Sempervivum

Hallo Kurtus,
ich weiß nicht genau, wie es sich mit der Adressierung bei Frames verhält, aber ich würde probieren, mal den vollständigen Pfad zum Video anzugeben (http://www.mcv-moemlingen.de/startfiles/mcv-breit.mp4). Dann umgehst Du Probleme damit.

Danke für den Link, aber wie ich schon schrieb, gibt es genug Plugins. Meine Absicht war nur, Rantanplans Frage zu beantworten, warum sein Skript nicht mehrfach angewendet werden kann.

Zitat: " wieso geht denn die eine gallerie nur einmal pro seite?"
Der Grund ist, dass dieser Code globale Variablen verwendet und sich pauschal auf alle img-Tags bezieht, ein häufiges Problem bei älteren Skripts:

var images = document.getElementById("divId");
document.getElementsByTagName("img");

Eine schlechte Lösung wäre, die Variablen zu vervielfachen und ihnen und den IDs eindeutige Namen zu geben:

// 1st gallery
var images1 = document.getElementById("divId1");
// 2nd gallery
var images2 = document.getElementById("divId2");

Um die zugehörigen Bilder zu ermitteln, müsste man dann die Kind-Elemente der Container ermitteln. Wie gesagt, eine sehr schlechte Lösung.

Eine bessere Lösung besteht darin, alle Variablen in einer Funktion zu kapseln und alle HTML-Elemente in einem Container unterzubringen und dessen Selektor an die Funktion zu übergeben:

function mygallery(sel) {
	var bigimg = <img class="bigimg">;
	$(sel + " img").on("click", function() {
    	$(sel + ".bigimg").attr("src", $(this).attr("src"));
	});
	$(sel).prepend(bigimg);
}

Dann für die verschiedenen Galerien diese Funktion mit dem betr. Selektor aufrufen:

mygallery("#gallery1");
mygallery("#gallery2");

Ungetestet, ich wollte nur mal die ungefähre Vorgehensweise skizzieren.
BTW: Es gibt viele gute, fertige Galerie-Skripts, so dass es sich nicht lohnt, so etwas selber zu schreiben, es sei denn, man nimmt es als Übungsaufgabe, um Javascript/jQuery zu lernen. Z. B. dieses:
http://galleria.io/

Da fehlt das schließende </a>-

Sollte funktionieren, wenn Du das a-href-Tag um den Swiffycontainer legst:

<a href="deinlink.html">
<div id="swiffycontainer" style="width: 468px; height: 60px">
   </div>
</a>

Es würde das Verständnis wirklich sehr erleichtern, wenn Du einen Link zu der Seite posten würdest.

Verstehe ich dich richtig: Um die kleinen Bilder herum ist kein Platz, um das Hover aufzuheben? Wo willst Du denn dann den Link bzw. den Button für das Wegschalten unterbringen? Es würde wahrscheinlich das Verständnis deines Problems erleichtern, wenn Du einen Link zu der Seite posten würdest. Du hast meine Frage gar nicht beantwortet, ob diese Galerie mit CSS realisiert ist.

Ist diese Galerie nur mit CSS realisiert? Dass die Bilder beim Hover vergrößert werden, spricht dafür.
Leider leuchtet mir dein Vorhaben nicht ganz ein: Du schreibst ja: "Für eine kleinere Darstellung (Smasrtphone etc.) soll nun ein Close-Image oder dergleichen her.". Warum machst Du dann nicht einfach das große Bild kleiner, dann würde die Galerie immer noch funktionieren? Und wenn Du das große Bild auf einem kleinen Bildschirm verschwinden lassen willst, wäre es dann nicht besser, das automatisch mit einer Media-Query zu machen?

Ich sehe dagegen die Gefahr, dass Einsteiger resigniert aufgeben, wenn man sie mit fortgeschrittenen Techniken überfordert und es dann gar nicht zu einem fortgeschrittenen Lernprozess kommt.

Du setzt bei deinen Postings immer die Gültigkeit von Definitionen des "guten Programmierstils" voraus, die teilweise axiomatisch und praxisfremd sind (wie bei den Lösungen für das Problem des TO). Aber dazu habe ich ja schon in Posting #8 geschrieben.

Glücklicher Weise habe ich neben der Webprogrammierung noch einige andere Interessen, wo es meistens entspannter zugeht. Und dadurch kann ich diese Dinge aus einer gesunden Distanz beurteilen und das bringt mich zu der Einschätzung, dass ich ihnen nicht so eine große Bedeutung beimesse. Wichtig finde ich jedoch das, was in #11 geschrieben habe.

Leider verstehe ich dein Posting nicht richtig. Nur, dass Du auf Knopfdruck Klassen wechselst und transition verwendest, also offenbar etwas animieren willst. Was machst Du denn genau mit deinen Divs? Und was willst Du mit deinen Bildern machen und was funktioniert dabei nicht? Wahrscheinlich ist es am besten, wenn Du etwas mehr Code postest, von einem Div, das funktioniert und von einem Bild, das nicht funktioniert.

Ein Aspekt, der noch gar nicht zur Sprache gekommen ist, ist folgender: Ein großer Teil der Besucher, die in Computerforen Fragen stellen, sind Einsteiger, die nur geringe oder gar keine Kenntnisse in der Programmierung haben. Und ich bin der Meinung, dass man diesen einfache und leicht zu verstehende Lösungen anbieten und sie nicht mit fortgeschrittenen Techniken überfordern sollte. Genau das war meine Absicht bei dem Code, den ich am Anfang gepostet hatte. Andernfalls sehe ich die Gefahr, dass der betr. die Lösung kopiert, ohne sie zu verstehen und dann nicht in der Lage ist, sie selbständig weiter zu entwickeln. Ich selber habe, als ich am Anfang der Einarbeitung in JS war, anonyme Funktionen undurchsichtig und schwer zu verstehen gefunden. Im Verlauf der Entwicklung habe ich sie dann verstanden und mich damit angefreundet. Ebenso das Vermeiden von globalen Variablen: Hat auf jeden Fall seine Berechtigung für umfangreichere Projekte aber nicht für Einsteiger und wenn es sich um ein Skript von ein paar Zeilen handelt.

Aufheben kannst Du die Formatierung natürlich, indem Du es aus der CSS-Datei heraus nimmst. Wenn ich dich richtig verstanden habe, stört dich, dass der Text das Hintergrundbild (Menüsymbol) überdeckt. Dazu hatte ich dir empfohlen, ein padding-top einzuführen. Würde dann so aussehen:

aside a
{
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	background-color: #888888;
	display: block;
	width: 100px;
	height: 40px;
	position: absolute;
	top: 158px;
	left: 0px;
        padding-top: 100px;
}

Dort kannst Du auch die Schriftgröße verringern.

"lightbox für html-elemente" Ja, gibt es und mit Fancybox bist Du ja fündig geworden. Die Lightbox von http://lokeshdhakar.com kann jedoch nur Bilder anzeigen.
Für die Formatierung der a-Tags in aside ist jedoch dieses in demo.css verantwortlich:

aside a
{
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	background-color: #888888;
	display: block;
	width: 100px;
	height: 40px;
	position: absolute;
	top: 158px;
	left: 0px;
}

Hast Du das auch irgendwoher übernommen?

Die Wiki von SelfHTML stellt beide Varianten wertfrei nebeneinander:
http://wiki.selfhtml.org/wiki/JavaScript/Event-Handler
Ich habe den Eindruck, dass bei der Einschätzung, was "guter Stil" ist, außertechnische Motive im Vordergrund stehen: Dogmatismus und das Streben nach Profilierung statt Praxisrelevanz und Verständlichkeit. Welche Blüten das treiben kann, kann man sich hier ansehen:
https://www.tutorials.de/threa…array-mit-scandir.401675/

Warum? Nur weil es einfach und übersichtlich ist? Sind nur kryptische Formulierungen "guter Stil"? Der TO schrieb:

Zitat

mit nur einer kleinen js

Wo hast du das denn her? Ich frage mich, ob du das richtig anwendest.
Die Überdeckung kannst Du vermeiden, indem Du dem a-Tag ein padding-top gibst, dann wird die Schrift nach unten verschoben. Und die Schrift("Unsere Smartphone-App") würde ich kleiner machen, damit sie die anderen Inhalte nicht überdeckt.

Wie Wolf schon schrieb, wird es ohne JS nicht gehen. Es sind aber nur wenige Zeilen. Ein Problem ist nur die midi-Datei. Heute werden Musikdateien durch das audio-Tag abgespielt und das benötigt das MP3-Format. Du musst deine midi-Datei konvertieren.

<iframe id="idiframe" src="dein_urspruenglicher_inhalt.html"></iframe>
<audio id="idaudio" src="deine_sound_datei.mp3"></audio>
<img src="deine_grafik.jpg" onclick="change();">

function change() {
	document.getElementById("idiframe").src = "dein_neuer_inhalt.html";
	document.getElementById("idaudio").play();
}

Ups, da haben sich Wolfs Edit und mein Posting überschnitten.

Du hast den Container .app mit position:fixed positioniert. Dadurch ist er aus dem normalen Textfluss herausgenommen und klebt am oberen Browserfenster (mit Abstand wie definiert). Außerdem hast Du den a-Tags innerhalb von aside ein Hintergrundbild gegeben; dadurch überdeckt der Text "Unsere Smartphone-App" dieses Bild. Und weil Du die Größe der a-Tags reduziert hast, ragt der Text über den Rand hinaus.

Nein, wenn Du es richtig machst, brauchst Du das Lightbox-Skript nicht zweimal einzubinden.
Ist das diese Lightbox?:
http://lokeshdhakar.com/projects/lightbox2/
Dann benutzt sie nicht Prototype, sondern jQuery. Befolge genau die Anleitung auf der Homepage, dann funktioniert es auch. Leider kursieren noch fremde Anleitungen für diese Lightbox, die sich auf die alte Version mit Prototype beziehen.
Und hier:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

bindest Du jQuery zweimal ein. Versuche es zunächst mit der latest-Version und lösche die zweite Zeile.
Ein Problem könnte noch sein, dass die Lightbox und das Menü unterschiedliche jQuery-Versionen brauchen, aber das warte erst mal ab.
Edit: Habe mich gerade davon überzeugt, dass Du die Lightbox2 von http://lokeshdhakar.com verwendest. Dann musst Du die ersten drei Zeilen in deinen Einzügen löschen. Übrig bleibt:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.mmenu.min.all.js"></script>
<script type="text/javascript" src="lightbox.js"></script>

Ich weiß nicht, wie es anderen geht, aber mir ist es zu viel, den gesamten Code durchzugehen. Kannst Du deine Frage für ein Element mal präziser machen: Welches Element soll geklickt werden? Was soll dann passieren? Mit welchem Element? Was meinst Du mit "per lightbox" funktioniert es?
Hast Du kein fertiges Skript gefunden, das deine Anforderungen erfüllt?
Hilfreich wäre es auch, wenn dein Code eingerückt wäre.