Hallo zusammen,
da es mit der Slideshow noch nicht so ganz bei mir funktionierte, habe ich einen recht einfachen Weg gewählt, um das jQuery Supersized-Script einzubinden.
Dabei nutze ich die Erweiterungen "jquery" und "header_code" mit den aktuellen Versionen.
Es funktioniert in allen Browsern, auf mobilen Endgeräten und durch die Erweiterung "header_code" binde ich das Settings-Script für die Slideshow ein, mit individuellen Links zu Bildern im Dateisystem. So habe ich ebenfalls für jede Unterseite eine individuelle Fullsize-Slideshow.
viele Grüße,
Daniel
Nachtrag: Ich geb die Anleitung schnell an, da's ganz schnell geht:
1. Von http://buildinternet.com/project/sup.../download.html die aktuelle Version runterladen.
2. Erstellt im root-Verzeichnis von Contao den Ordner js und ladet die Dateien jquery.easing.min.js und supersized.3.2.7.min.js per FTP hoch.
3. Installiert die Erweiterung jquery und aktiviert es im Seitenlayout. Installiert die Erweiterung header_code.
4. Erstellt im Ordner tl_files den Ordner seitenbilder und ladet Eure Bilder hoch, in diesem Fall 001.jpg, 002.jpg, 003.jpg - für's Erste.
5. Geht auf Eure Seitenstruktur und bearbeiet die jeweilige Seite. Fügt den nachfolgenden Headercode ein, und tauscht entsprechend die Bildlinks aus:
PHP-Code:
<script type="text/javascript" src="../../js/jquery.easing.min.js"></script>
<script type="text/javascript" src="../../js/supersized.3.2.7.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 12500, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1500, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 0, // Keyboard navigation on/off
performance : 3, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 960, // Min width allowed (in pixels)
min_height : 640, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'false', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 0, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
progress_bar : 0, // Timer for each slide
mouse_scrub : 0,
slides : [ // Slideshow Images
{image : '../../tl_files/seitenbilder/001.jpg'},
{image : '../../tl_files/seitenbilder/002.jpg'},
{image : '../../tl_files/seitenbilder/003.jpg'}
]
});
});
</script>
6. Erstellt das nachfolgende CSS und bindet dieses ebenfalls in die Seitenstruktur ein:
PHP-Code:
/*
Supersized - Fullscreen Slideshow jQuery Plugin
Version : 3.2.7
Site : www.buildinternet.com/project/supersized
Author : Sam Dunn
Company : One Mighty Roar (www.onemightyroar.com)
License : MIT License / GPL License
*/
* { margin:0; padding:0; }
body { background:#111; height:100%; }
img { border:none; }
#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}
#supersized { display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/
#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.prevslide { z-index:-20; }
#supersized li.activeslide { z-index:-10; }
#supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
Das war's schon. :-)
Liebe Grüße,
Daniel
,
Zitieren
Zitat von Messa
Background wird nicht runterskaliert :-(
Lesezeichen