OPTEN, das einzige Umbraco-zertifizierte Unternehmen der Schweiz

Project Preview

Wir wollten unsere Designs unseren Kunden so präsentieren, sodass sie einer echten Webseite möglichst ähnlich ist. Das Ergebnis ist ein jQuery-Plugin.

Bevor Sie weiterlesen und ich Ihnen erkläre, wie das Plugin eingesetzt wird, schauen Sie sich doch die Demo an.

Dependencies

Wir brauchen das Stylesheet, welches im <head> eingebunden wird.

<link rel="stylesheet" href="../pfad/zu/project-preview.css" />

Wir müssen auch die JavaScripts hinzufügen. Diese Files können im <head> oder am Ende des <body> hinzugefügt werden.

<script src="path/to/jquery.min.js"></script>
<script src="../js/jquery.project-preview.js"></script>

Markup

Für die Slides brauchen wir einen Wrapper und die einzelnen Slides.

<section id="wrapper">
    <article class="visible" data-title="Layout Website">
        <img src="http://placehold.it/1280x1280&text=1" />
    </article>
    ... <!—Die weiteren Slides kommen hier à
</section>


Falls Sie Buttons und Pagging wollen, können Sie die folgenden Snippets zu ihr HTML hinzufügen. Wo diese HTML-Elemente hinkommen können Sie bestimmen.

<button data-next>Next</button>
<button data-prev>Previous</button>

<ul class="pagging">
    <li class="active"></li>
    ...
</ul>


Um das JavaScript zu initialisieren brauchen wir folgende JavaScript-Funktion:

$('#wrapper').projectPreview();

Wenn Sie nicht die gleichen Ids und Klassen verwendet haben wie ich, müssen Sie diese im CSS und im JavaScript ändern.

$('#wrapper').projectPreview({
    // Die Slides
    $articles: 'article',
    // Button Weiter
    $buttonNext: '[data-next]',
    // Button Zurück
    $buttonPrev: '[data-prev]',
    // Navigation
    $pagging: 'footer ul.pagging li',
    // Slide Titel
    $title: 'footer p.title'
});


Für weitere Informationen finden Sie das Projekt auf Github oder schauen Sie in meiner Mailbox vorbei.


kommentieren


0 Kommentar(e):