hat jemand eine Idee wo ich eine Bild er galerie ohne Copyright finde? Vielleicht kann mir auch jemand bei der Erstellung einer helfen?? Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden! lima-city: Gratis werbefreier Webspace für deine eigene Homepage
t*****b
Eine Bildergalerie ist lediglich eine Ansammlung von Bildern, was spricht dagegen, die Bilder einfach in die Seite einzufügen? Wenn du eine dynamische Galerie willst, kommst du an PHP nicht vorbei. Oder was genau willst du mit JavaScript machen? Alle unsere Bilder-Javascripts - kostenlose-javascripts.de. Hier findest du einen Code mit Javascript:
MFG
Beitrag zuletzt geändert: 18. 2. 2009 19:14:28 von testings
rock4life schrieb: hat jemand eine Idee wo ich eine Bildergalerie ohne Copyright finde? Meinst du so etwas? wenns dir gefällt, kopiere dir einfach den Quelltext und füge deine eigenen Bilder ein. Ich weiss nicht mehr woher ich es habe, es unterliegt aber auf keinen Fall einem Copyright nur bei den Bilder die ich eingesetzt habe, musste ich einen Quellennachweis angeben. Grüsse Malia
trueweb schrieb:
naja, doch, kommt man.
- Galerie mit javascript in your browser
- Galerie mit javascript dhtml
- Galerie mit javascript source
Galerie Mit Javascript In Your Browser
Sie können solche Image-Objekte nicht direkt in die images -Collection eintragen oder ein bestehendes Bild ersetzen. Um Objekte ins DOM aufzunehmen oder zu ersetzen, sind die Methoden appendChild, insertBefore oder replaceChild des gewünschten Elternelements zu verwenden. Galerie mit javascript dhtml. Wenn Sie nur die Bildquelle oder ein Attribut eines Image-Objekts verändern wollen, dann ist es allerdings gleichgültig, auf welche Weise Sie sich das Objekt beschafft haben. Das Ändern eines Image-Objekts ist kein Ändern der images -Collection und jederzeit möglich. Weblinks [ Bearbeiten]
W3C: images
MDN:
images [ 'elli'];
var bild1c = document. namedItem ( 'elli');
var bilder2a = document. getElementsByName ( 'elli');
var bilder2b = document. querySelector ( 'img[name=elli]');
Sie sehen ein Problem der images -Collection: Man kann nicht zwischen dem Zugriff über id oder name unterscheiden. Gibt es Bilder, wo der name des einen die id des anderen ist, so hat die id Vorrang. Ein Image Objekt erzeugen oder verändern [ Bearbeiten]
Sie erzeugen Image-Objekte wie jedes andere DOM Objekt über die Funktion createElement(). Beispiele finden Sie im verlinkten Wiki-Artikel. Galerie mit javascript source. Außerdem gibt es noch den Image Konstruktor, mit dem Sie ebenfalls ein Image-Objekt anlegen können. Auch dieser Konstruktor ist als Museumsstück anzusehen. Die beiden folgenden Codestücke tun das gleiche. var bild = new Image ( 24, 24);
bild. src = '';
var bild = document. createElement ( 'img');
bild. width = 24;
bild. height = 24;
Wenn Sie die natürliche Bildgröße verwenden wollen, rufen Sie den Image-Konstruktor ohne Parameter auf.
Galerie Mit Javascript Dhtml
Die Bilder haben alle das gleiche Seitenverhältnis 940 x 600 Pixel oder 94/60 = 1, 5666
Die Breite ist somit 1, 5666 mal größer als die Höhe. Die maximale Höhe wurde auf 90vh gesetzt. 90% der Viewport Höhe
Die Breite wird errechnet mit 90vh * 1, 5666 = 141vh und ein paar Zerquetschte. Bei einer anderen Bildgröße muss selbstverständlich dieses CSS angepasst werden. Im Javascript bekommt jeder Button einen EventHandler mit Funktionsaufruf. Es gibt 2 Funktionen nextPic und prevPic. Dort wird die Variable nr rauf- bzw. runtergezählt. Gallery 3
In Beispiel Gallery 3 wird ein Ein und Ausblenden mittels CSS transition und der CSS Eigenschaft opacity erzeugt. transition: opacity 0. Einfach Bildergalerie mit Javascript ?. 4s;
Die Schwierigkeit ist hier, dass das Neuladen des anderen Bildes erst dann geschehen darf, wenn das Bild ausgeblendet ist und danach soll sich das neu geladene Bild einblenden. Das Aus und Einblenden dauert immer 400 Millsekunden, wegen des eingebenen CSS Wertes 0. 4s
Die Funktion showNext und showPrev blendet das Bild aus und ruft mit einer Zeitverzögerung von 4 Millisekunden die Funktion nextPic, bzw prevPic auf.
CSS
Die Größe des Bildes passt sich an kleinere Bildschirmgrößen an. img {
max-width: 100%;
height: auto;}
Javascript
Direkt vor dem schließenden Body-Tag wird das Javascript eingefügt. var amount = 12; // Die Anzahl der Bilder
var nr = 0; // eine Zählvariable, welche die aktuelle Bildnummer speichert
var bilder = new Array(); // Pfade zu den Bildern
In einer for-Schleife werden die Pfade zu den Bildern dem Array zugewiesen. for(i=0; i < amount; i++){
bilder[i] = "img/gallery/bild"+i+"";}
Das Bild im Body bekommt einen EventListener und ruft die Funktion nexPic auf. tElementById("slideImg"). onclick = nextPic;
nextPic()
In einer if Struktur wird die Variable nr um 1 erhöht oder auf 0 gesetzt, wenn der höchste Index des Arrays " bilder " erreicht ist. Mit dieser Variable nr kann man jeweils das nächste Arrayelement ansprechen. bilder[nr]. WebDesign - Tips und Tricks: JavaScript-Diashow. Mittels DOM wird die Referenz auf das Bild geändert. tElementById('slideImg').
Galerie Mit Javascript Source
Bei Klick auf das Bild wird ein anderes Bild an dieser Stelle geladen. Bild per Mausklick im Popup öffnen ( 790 Bewertungen, ∅ 3, 62 von 5) Du musst eingeloggt sein um bewerten zu können. Das Bild wird auf der Seite klein (je nach gesetzter Grösse) angezeigt, und per Mausklick wird Das Bild in Originalgröße in einem anderen Fenster geöffnet. Bildgröße per Klick ändern ( 270 Bewertungen, ∅ 3, 39 von 5) Du musst eingeloggt sein um bewerten zu können. Per Mausklick wird das Bild vergrößert, mit einem Klick auf den unteren Link wird das Bild in die ursprüngliche Größe gebracht. Sticky Logo ( 334 Bewertungen, ∅ 3, 42 von 5) Du musst eingeloggt sein um bewerten zu können. Dieses Script setzt ein Logo oder ein Bild rechts unten auf die Seite. Dieses bleibt auch beim scrollen stets dort. Ändern könnt ihr das Bild, indem ihr den Galerie mit javascript in your browser. > Tag einfach anpasst. Im Beispiel steht dort einfach nur 🙂 Herzspirale ( 194 Bewertungen, ∅ 2, 53 von 5) Du musst eingeloggt sein um bewerten zu können. Eine schicke Herzspirale für alle Verliebten.
Die einzelnen Slides sehe ich als beliebige Abfolge von einzelnen Elementen, deshalb die Wahl der unsortierten Liste, bei der jedes li einem Slide entspricht. Jedes dieser Slides besteht aus einem Bild und zugehöriger Beschreibung; ob das Konstrukt aus figure und figcaption korrekt ist, muss man im Einzelfall sehen. Die einzelnen input wären sicherlich auch sehr gut mit einer Liste ausgezeichnet, allerdings müssen wir darauf leider verzichten, da es in CSS keinen passenden Selektor (müsste ein Eltern-Selektor sein) gibt, um dann noch die einzelnen Slides in Abhängigkeit des Status der Radiobuttons ansprechen zu können. Bei den label haben wir das Problem nicht, da sie Kinder eines Geschwisterelements, also problemlos ansprechbar sind. Die grundlegenden Funktionen
Essentiell für die Funktion ist, dass wir die Slides nebeneinander bringen (also unser Band entstehen lassen) und dafür sorgen, dass sie am Rande des Containers (Sichtfenster) abgeschnitten werden. Der Übersichtlichkeit halber lassen wir den Slider hier generell über die komplette Seitenbreite laufen.