2009-08-15 7 views
6

Kennt jemand ein gutes Leuchtkasten Plugin für Schienen? Ich habe eine Redbox gefunden, aber es scheint sich nicht in der Entwicklung zu befinden.Leuchtkasten für Schienen?

Danke!

-Elliot

Antwort

5

Ich benutze nur die normale Lightbox 2. Enthalten Sie alle passenden Javascript und Stylesheets dann: rel => "lightbox" auf Ihren Links.

+2

Könnten Sie bitte näher ausführen, wie Sie JavaScripts und Stylesheets und die Verwendung in der .html.erb (Ansicht) Datei hinzufügen ?? –

0

Sie lightbox2 versuchen können, weiß nicht, ob es irgendwelche Schienen ist, es zu benutzen Plugin, aber einige Hilfsfunktionen Schreiben nicht so schwierig sein sollte.

0

ich rlightbox empfehlen würde. Es ist ein jquery UI-Plugin. Es kann für Fotos und Videos verwendet werden, und die Dokumentation ist ziemlich gut

3

Hier Beispiel ist, wie leicht in Schienen Leuchtkasten benutzen zu können (v4 in meinem Fall):
1. Download von Website: http://lokeshdhakar.com/projects/lightbox2/
2. Kopieren Sie Leuchtkasten Js zu app/assets/Javascripts
3. Kopieren lightbox.css zu app/assets/Stylesheets
4. Umbenennen lightbox.css
5. Kopieren vier IMG zu app/Vermögen lightbox.css.scss.erb/Bilder
6. Bearbeiten lightbox.css.scss.erb:
- Alle Bildpfade ersetzen durch:

<%=image_path "close.png"%> 

mit richtigem Bildnamen.
Fügen Sie jedem Bildlink ein Daten-Lightbox-Attribut hinzu, um die Lightbox zu aktivieren. Verwenden Sie für den Wert des Attributs einen eindeutigen Namen für jedes Bild. Zum Beispiel:

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a> 

Das ist alles.

+1

Anstatt die erb-Verarbeitung für die CSS-Datei und damit '<% ​​= image_path ...%>' zu verwenden, speichern Sie sie stattdessen nur als 'lightbox.css.scss' und verwenden Sie 'image-url (" close.png ") 'in der Datei anstelle von' url (...) '. Keine Notwendigkeit für erb hier! –