X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Kostenlose Premium-Zugang

Rufen Sie unsere gesamte Bibliothek von Premium-Hub Artikel, Projekt-Dateien und die ersten 10% des jeweiligen Tutorial-Video aus dem Online-Tutorial-Bibliothek .

Erstellen Sie jetzt Ihren kostenlosen Zugang!

Erstellen Sie ein jQuery Image Gallery Lightbox in Dreamweaver
Übersetzt von Google Translate

Sie haben wahrscheinlich die Lightbox-Effekt bei der Arbeit während Ihrer Reise über das Internet zu sehen, obwohl Sie vielleicht nicht bekannt, dass es hieß Lightbox haben. Grundsätzlich erscheint der Besucher klickt auf ein Bild aus der Bildergalerie und eine größere Version auf der Seite, Dimmen aus dem Inhalt der Seite dahinter. Diese weit verbreitete Effekt nutzt jQuery und wurde ursprünglich von Leandro Vieira Pinho verfasst. Die tatsächliche Lightbox-Effekt wird durch Hyperlinks, die wir auf unserer Seite gesetzt ausgelöst werden. Sie sind sehr glatt, und in diesem Tutorial wirst du lernen, wie man in Bau Dreamweaver !


Schritt 1

Stellen Sie zunächst sicher und laden Sie die Projekt-Dateien für dieses Tutorial. Entpacken Sie die Datei und speichern Sie das Projekt-Dateien in einem Verzeichnis, das Sie daran erinnern, werde wie dein Desktop. Innerhalb des Projekt-Dateien-Ordner finden Sie 2 weitere Ordner "assets" und "Bilder". Sie enthalten alle Komponenten, die wir brauchen.


Schritt 2

Nun, gehen Sie vor und starten Sie Dreamweaver und wählen Sie Site


Schritt 3

Anschließend erstellen Sie eine neue leere Datei, Flip in der Codeansicht, fügen

Dieser Code enthält die Links zu externen JavaScript-und CSS-Dateien, die auf unserer Seite benötigen, werden auch einige zusätzliche Funktionen. Achten Sie darauf, Ihre Datei in den Ordner, den Sie als Site oben definierten speichern.


Schritt 4

Jetzt sind wir bereit für die Struktur der Seite, also die Rahmenbedingungen, die unsere Vorschaubilder halten werde. Go ahead, und fügen

Wie Sie sehen können, gibt es einen äußeren "lightboxgallery"


Schritt 5

Jetzt müssen wir unsere Vorschaubilder. Lassen Sie Ihre Cursor in die erste Miniaturansicht


Schritt 6

Mit unseren Miniaturen in Ort, ist es jetzt Zeit, um alles miteinander zu verbinden und nutzen Sie die Lightbox-Skript passiert. Wie bereits erwähnt, wird das Skript für unsere Lightbox geht auf die mit Hyperlinks ausgelöst werden, so gehen wir und das Setzen von Links für die größeren Versionen von jedem Bild und testen Sie dann unsere Ergebnisse.

Flip über die Entwurfsansicht, wählen Sie den ersten Thumbnail Grafik, dann auf Eigenschaften klicken Inspector (das Ordnersymbol neben dem Feld Link) "Nach Datei suchen". Navigieren Sie zu dem entsprechenden Bild in voller Größe in der "Bilder"-Ordner. In diesem Fall "fullsize1.jpg." Wiederholen Sie diesen Vorgang für jede Miniatur, verbindet jede zu ihrer vollen Größe Gegenstück.


Step 7

Wir sind endlich bereit, Dinge auszuprobieren! Speichern Sie die Datei, und wählen Sie Datei

Überprüfen Sie heraus diese

Bildergalerie erstellen Lightbox Project Files

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

Sep 15, 2011
Hi there,

I can't seem to find the project files(zip folder) to download, that is needed for this tutorial???
Sep 15, 2011
Rounik
Hi,

They are hyperlinks in the text (in blue) in Step 3, Step 4 and the very last line of this tutorial is a link: "Create Image Gallery Lightbox Project Files".

Just click on these to begin downloading the files.

Hope this helps
Rounik
Sep 15, 2011
Thanks for the previous reply.

I now got that done but I have a website already up but I want to have a lightbox on my photography page in the content area. The content area box is an ap div though, and I did the exact same procedure with the code and all but it doesnt show up when I refresh the page????
Sep 15, 2011
Thanks for the reply.

I have a website up but I want my photography page to have a lightbox, but when I try and do it on the content page which is an ap div, it doesnt seem to show up at all??? Am I doing something wrong with placing the code maybe???

May 13, 2012
Un souci ds votre tuto je ne trouve pas les code a copier coller ds dreamweaver ds le fichier que jai telecharger et dc je peu rien fr sur dream sauf si fo recopier ce que vous avez marquer sur votre excemple tuto
Sep 16, 2012
wow!!!this tutorial was helpful....but what about prev,next,close and loading icons....hope you will provide the tutorials about that...
Jan 12, 2013
azex
hi, 4 images is looks simple. but, how about if the images is hundred over..? do i need to edited one by one? any other way to simplify it.
Jan 13, 2013
Ian
Thanks Geoff,

That's a fantastic tutorial for someone like me who sits more on the creative side but sometimes needs to pretend he is a programmer!!

The code works perfectly well.

I am wondering if there is a fairly simple option - or a tutorial of yours somewhere else - to show how to add descriptive text for each image when it is displayed in the Lightbox, rather than just the "Image 4 of 14" text?

Cheers,

Ian
Feb 25, 2013
Emily
Is there a way to add HTML content (like another webpage) to pop up in the lightbox as well?
You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link