- Web Templates
- E-commerce Templates
- CMS und Blog Templates
- Facebook Templates
- Website-Builder
JS Animated. Wie ändert man Größen des Camera Sliders
März 3, 2014
Dieses Tutorial zeigt, wie ändert man Größen des Sliders in Ihrer Website Vorlage.
JS Animated. Wie ändert man Größen des Camera Sliders.Gehen Sie zum Ordner /images/ über und ersetzen Sie ein aus anderen Bildern im Slider durch neues mit anderen Größen. Zum Beispiel, grundlegendes Bild heißt slide.jpg. Sie brauchen es durch neue Datei mit solchem Name slide.jpg zu ersetzen. Wenn Ihre neue Datei slide3.jpg heißt, können Sie einfach sie in den Ordner images hochladen und den Namen in html Code ändern.
Wenn Sie die Datei index.html im Webbrowser öffnen, dann sehen Sie, dass das Bild ersetzt war, aber es sieht einbisschen gezogen aus.
Um es zu berichtigen, brauchen Sie Größen des neuen Bildes zu erfahren, zum Beispiel 1200 X 600 Pixel.
Mittels des Plugins Firebug für Firefox suchen Sie <div id="camera_wrap">, wie unten (id divkann sich in Ihrer Vorlage unterscheiden)gezeigt ist:
Fügen Sie neues Verhalten von der Breite für diese Selector-Klasse width: 1200px hinzu! important; (wo 1200px – die Breite des neuen Bildes für Slider). Dieses Verhalten erlaubt Ihrem Bild nicht gezogen auszusehen.
Fügen Sie noch ein Verhalten des Felds zu dieser Selector-Klasse margin: 0 auto; hinzu,um das Bild zu zentrieren.
Jetzt sollen Sie Selector-Klasse aus Firebug kopieren und bearbeiten und durch sie Original-Selector ersetzen:
.camera_wrap { display: none; margin: 0 auto; overflow: visible !important; position: relative; width: 1200px !important; z-index: 0; }
Speichern Sie die Änderungen, die Sie in der Datei camera.css gamacht haben.
Öffnen Sie die Datei index.html, in der sich der Code des Slider befindet, in Adobe Dreamweaver oder in anderm CodeEditor. Suchen Sie die Skript vom Initialisieren des Sliders zwischen zwei Tags <script></script>:
$(document).ready(function(){ jQuery('#camera_wrap').camera({ loader: false, pagination: true , minHeight: '250', thumbnails: false, height: '42.6%', caption: false, navigation: false, fx: 'mosaic' }); $().UItoTop({ easingType: 'easeOutQuart' }); })
Weil die Breite von neuem Bild 1200px, und die Höhe 600px, neuer Prozentsatz soll 50% (600/1200*100=50)sein. Ändern Sie die Höhe ‘42.6%’ an ‘50%’ und speichern Sie die Änderungen.
Jetzt soll Ihr Bild auf Slider mit neuen Größen dargestellt werden.
Hier sind ihre Stile in /site/css/camera.css:
.camera_wrap { display: none; margin-bottom: 0 !important; overflow: visible !important; position: relative; z-index: 0; }
Machen Sie sich, bitte, mit ausführlichem Video-Tutorial unten bekannt:
JS Animated. Wie ändert man Größen des Camera Sliders.