• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Script vereinfachen?

dbarthel

dbarthel

Lounge-Member
Hi,

ich habe mal Supersized 3.2.7 etwas gemoddet und dem ganzen eine Fullscreen- und Audio-Integration verpasst; funktioniert auch alles.

Nun wollte ich mal fragen, ob man das folgende, verwendete Script sinnvoll vereinfachen, abkürzen könnte, ohne die Funktionalität zu gefährden.

Hier das Script:
Code: 
<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          :   3000, // Length between transitions


transition              :   6, 	// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left


transition_speed	:   1000, // 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		:   1,	// 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		:   0,	// Min width allowed (in pixels)


min_height		:   0,	// 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             :  'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
	
thumb_links		:  0, // Individual thumb links for each slide
	
thumbnail_navigation    :  0, // Thumbnail navigation




slides 			:  [// Slideshow Images
	
			{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},


                        {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
			{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                 	{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},


	//		{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},


                	{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
			{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},


			{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},


			{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}


   			  ],


// Theme Options	
progress_bar		:	1, // Timer for each slide
mouse_scrub		:	0


});


});




$(function () {
// fullscreen api
// modified


$('#fullscreen-go-button').click(function () {
if (screenfull.enabled) {
        screenfull.request();
        $('#fullscreen-go-button').css('display','none');
        $('#fullscreen-end-button').css('display','block');
    } else {
        // Ignore or do something else
    }
});


$('#fullscreen-end-button').click(function () {
screenfull.exit();
$('#fullscreen-go-button').css('display','block');
$('#fullscreen-end-button').css('display','none');
});
     
});
</script>


<script>
      $(function() { 
        // Setup the player to autoplay the next track
        var a = audiojs.createAll({
          trackEnded: function() {
            var next = $('ol li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.addClass('playing').siblings().removeClass('playing');
            audio.load($('a', next).attr('data-src'));
            audio.play();
          }
        });
        
        // Load in the first track
        var audio = a[0];
            first = $('ol a').attr('data-src');
        $('ol li').first().addClass('playing');
        audio.load(first);


        // Load in a track on click
        $('ol li').click(function(e) {
          e.preventDefault();
          $(this).addClass('playing').siblings().removeClass('playing');
          audio.load($('a', this).attr('data-src'));
          audio.play();
        });


// audio buttons


$('#sound-on-button').click(function () {
audio.playPause();
$('#audio-prev-button').css('display','block');
$('#audio-next-button').css('display','block');
$('#sound-on-button').css('display','none');
$('#sound-off-button').css('display','block');
});


$('#sound-off-button').click(function () {
audio.playPause();
$('#audio-prev-button').css('display','none');
$('#audio-next-button').css('display','none');
$('#sound-on-button').css('display','block');
$('#sound-off-button').css('display','none');
});




$('#audio-prev-button').click(function () {
var prev = $('li.playing').prev();
            if (!prev.length) prev = $('ol li').last();
            prev.click();
});


$('#audio-next-button').click(function () {
var next = $('li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.click();
});


        
});

Vorallem würde mich interessieren, wie man den mehrfachen Auuf
Code: 
 $(function() {
weg bekommt und alle Script-Blocke zu einem Block zusammenführen kann?

(Ich hatte das ursprünglich zusammen in einer Funktion, aber da haben die Knöpfe nicht richtig funktioniert.)
 
Zuletzt bearbeitet:
Ich habe mal alles unnötige aus dem Code oben entfernt, damit es hoffentlich etwas übersichtlich wird.

Ich würde gerne die 3 einzelnen Script-Blocke in einem haben, aber einfach anfügen klappte nicht.
Kann bitte mal wer drüber sehen.
 
Ich finde den Code immernoch etwas unübersichtlich. Wofür sind oben nach jeder Zeile Leerzeilen? Und warum sind oben teilweise keine Einrückungen?

dbarthel schrieb:
Vorallem würde mich interessieren, wie man den mehrfachen Auuf $(function() { weg bekommt und alle Script-Blocke zu einem Block zusammenführen kann?
Zum Vergrößern anklicken....
Eigentlich kann man das alles zusammen kopieren. Da jedes $(function() { einen eigenen Namensraum definiert muss man halt mit den Variablen aufpassen. Wie sieht denn dein Versuch aus und welche Fehlermeldung zeigt die Browserkonsole?
 
Die Leerzeilen sind aus Versehen beim kopieren mit rein gerutscht und im Moment kann ich das nicht editieren, da nur mobil hier.

Zusammenkopieren hat nicht funktioniert, da funktionierte
Code: 
 audio.PlayPause ()
nicht.

Ich kopieren mal den zusammen-gepastelten Code morgen hier rein.
 
dbarthel schrieb:
Ich kopieren mal den zusammen-gepastelten Code morgen hier rein.
Zum Vergrößern anklicken....

So hier der Code:

Code: 
<script type="text/javascript">
	
jQuery(function(a) {
    a.supersized({
        slideshow: 1,
        autoplay: 1,
        start_slide: 1,
        stop_loop: 0,
        random: 0,
        slide_interval: 3000,
        transition: 6,
        transition_speed: 1000,
        new_window: 1,
        pause_hover: 0,
        keyboard_nav: 0,
        performance: 1,
        image_protect: 1,
        min_width: 0,
        min_height: 0,
        vertical_center: 1,
        horizontal_center: 1,
        fit_always: 0,
        fit_portrait: 1,
        fit_landscape: 0,
        slide_links: "blank",
        thumb_links: 1,
        thumbnail_navigation: 0,
        slides: [ {
            image: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg",
            title: "Image Credit: Maria Kazvan",
            thumb: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg",
            url: "http://www.nonsensesociety.com/2011/04/maria-kazvan/"
        }, {
            image: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg",
            title: "Image Credit: Maria Kazvan",
            thumb: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg",
            url: "http://www.nonsensesociety.com/2011/04/maria-kazvan/"
        }, {
            image: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg",
            title: "Image Credit: Maria Kazvan",
            thumb: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg",
            url: "http://www.nonsensesociety.com/2011/04/maria-kazvan/"
        }, {
            image: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg",
            title: "Image Credit: Colin Wojno",
            thumb: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg",
            url: "http://www.nonsensesociety.com/2011/03/colin/"
        }, {
            image: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg",
            title: "Image Credit: Colin Wojno",
            thumb: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg",
            url: "http://www.nonsensesociety.com/2011/03/colin/"
        }, {
            image: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg",
            title: "Image Credit: Brooke Shaden",
            thumb: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg",
            url: "http://www.nonsensesociety.com/2011/06/brooke-shaden/"
        }, {
            image: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg",
            title: "Image Credit: Brooke Shaden",
            thumb: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg",
            url: "http://www.nonsensesociety.com/2011/06/brooke-shaden/"
        }, {
            image: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg",
            title: "Image Credit: Brooke Shaden",
            thumb: "http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg",
            url: "http://www.nonsensesociety.com/2011/06/brooke-shaden/"
        } ],
        progress_bar: 1,
        mouse_scrub: 0
    });
    a("#fullscreen-go-button").click(function() {
        if (screenfull.enabled) {
            screenfull.request();
            a("#fullscreen-go-button").css("display", "none");
            a("#fullscreen-end-button").css("display", "block");
        } else ;
    });
    a("#fullscreen-end-button").click(function() {
        screenfull.exit();
        a("#fullscreen-go-button").css("display", "block");
        a("#fullscreen-end-button").css("display", "none");
    });
    var b = audiojs.createAll({
        trackEnded: function() {
            var b = a("ol li.playing").next();
            if (!b.length) b = a("ol li").first();
            b.addClass("playing").siblings().removeClass("playing");
            c.load(a("a", b).attr("data-src"));
            c.play();
        }
    });
    var c = b[0];
    first = a("ol a").attr("data-src");
    a("ol li").first().addClass("playing");
    c.load(first);
    a("ol li").click(function(b) {
        b.preventDefault();
        a(this).addClass("playing").siblings().removeClass("playing");
        c.load(a("a", this).attr("data-src"));
        c.play();
    });
    a("#sound-on-button").click(function() {
        c.playPause();
        a("#audio-prev-button").css("display", "block");
        a("#audio-next-button").css("display", "block");
        a("#sound-on-button").css("display", "none");
        a("#sound-off-button").css("display", "block");
    });
    a("#sound-off-button").click(function() {
        c.playPause();
        a("#audio-prev-button").css("display", "none");
        a("#audio-next-button").css("display", "none");
        a("#sound-on-button").css("display", "block");
        a("#sound-off-button").css("display", "none");
    });
    a("#audio-prev-button").click(function() {
        var b = a("li.playing").prev();
        if (!b.length) b = a("ol li").last();
        b.click();
    });
    a("#audio-next-button").click(function() {
        var b = a("li.playing").next();
        if (!b.length) b = a("ol li").first();
        b.click();
    });
});
</script>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben