Categories

Ausgewählte Vorlagen

JS Animated. Wie ändert man Größen des Camera Sliders

Norman Fisher März 3, 2014
Rating: 5.0/5. From 1 vote.
Please wait...

Dieses Tutorial zeigt, wie ändert man Größen des Sliders in Ihrer Website Vorlage.

JS Animated. Wie ändert man Größen des Camera Sliders.
  1. 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.

  2. Wenn Sie die Datei index.html im Webbrowser öffnen, dann sehen Sie, dass das Bild ersetzt war, aber es sieht einbisschen gezogen aus.

    js_animated_camera_slider_dimensions_changing_1
  3. Um es zu berichtigen, brauchen Sie Größen des neuen Bildes zu erfahren, zum Beispiel 1200 X 600 Pixel.

    js_animated_camera_slider_dimensions_changing_2
  4. Mittels des Plugins Firebug für Firefox suchen Sie <div id="camera_wrap">, wie unten (id divkann sich in Ihrer Vorlage unterscheiden)gezeigt ist:

    js_animated_camera_slider_dimensions_changing_3
  5. 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;
    }
    
  6. 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.

    js_animated_camera_slider_dimensions_changing_4
  7. Fügen Sie noch ein Verhalten des Felds zu dieser Selector-Klasse margin: 0 auto; hinzu,um das Bild zu zentrieren.

    js_animated_camera_slider_dimensions_changing_5
  8. 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;
    }
    
    js_animated_camera_slider_dimensions_changing_6
  9. Speichern Sie die Änderungen, die Sie in der Datei camera.css gamacht haben.

  10. Ö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.

  11. Jetzt soll Ihr Bild auf Slider mit neuen Größen dargestellt werden.

    js_animated_camera_slider_dimensions_changing_7

Machen Sie sich, bitte, mit ausführlichem Video-Tutorial unten bekannt:

JS Animated. Wie ändert man Größen des Camera Sliders.
Dieser Eintrag wurde um JS Animated Tutorials geschrieben und camera, change, dimensions, slider markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten