NetVision-Technik - "kleine" Projektvorstellung

NetVision-Technik (http://www.netvision-technik.de/forum/index.php)

- Off-Topic (http://www.netvision-technik.de/forum/forumdisplay.php?f=44)

- - "kleine" Projektvorstellung (http://www.netvision-technik.de/forum/showthread.php?t=7496)

"kleine" Projektvorstellung

Hallo liebe "Nörgel-Gemeinde" :D

Ich wurde vor ein paar Wochen hilfesuchend gebeten, einer Studentin bei ihrem Abschluß-Projekt zu helfen.
In ihrer Ausbildung haben die Lehrkräfte offensichtlich ihren eigenen Lehrplan "vergessen" und das Projekt
komplett an die Wand gefahren.
Im Klartext: Künstler ohne jeglichen Bezug zum Web soll eine komplett funktionierende Seite erstellen
Und das mal locker flockig 3 Monate vor Projekt-Abgabe (Prüfungs- / Abschlussrelevant)

Leider wurde sie (über 3 Ecken) erst 1 Woche vor Abgabe zu mir geschickt ....
Also haben wir das ganze mit einer so "heißen Nadel" gestrickt, wie ich das so noch nie gemacht habe ...

Den Code habe komplett ich erzeugt -- Sie hatte die "künstlerische Leitung" und den Inhalt :)

Und das ist herausgekommen: Josephine Scheibe

Als sie vor einigen Tagen "Abgabe" hatte, hat das Projekt einen durchschlagenden Erfolg erzielt.
Sie ist die einzige ihres kompletten Jahrgangs, die wirklich ein funktionierendes Projekt hatte.
Auch ist Sie die einzige, die nun wirklich eine Webseite hat .....

Ob der Qualität und der Funktion haben wir sogar ihren "vorlauten" Lehrer mudtot gemacht :D
Das nenn ich mal nen Erfolg :P

Zur Technik:
Aktuell sockelt alles auf JavaScript, da das Projekt komplett Offline-Fähig sein muß.
Als Kern wird ausschließlich jQuery genutzt.
Enthalten ist ein Form-Validator und ein URL-Parser (Damit Direkt-URLs auch zum Ziel führen).
Der Gesamte Inhalt wird dynamisch über ein JS-Array geladen, erzeugt und gerendert.
Es gibt im Grunde keinen festen Code - die Bestückung kann sich daher stetig ändern ohne Eingriff in den Code.

In dem Sinne -- Feedback ist auch hier natürlich gewünscht

PS: 100%ige Mobiltauglichkeit

die Lightbox ist nicht responsive wie der rest ;) wobei mobil ne Lightbox eh Mist ist und naja am Javascript kann man wirklich noch ein bissel feilen, 20 Zeilen Code in der jquery.functions.js könntest du locker sparen

Ich weiß ...
Es muß ja aber "abgabefähig" sein ...
daher ist manches nicht "hochoptimiert"

ach und das ist nicht abgabefähig :p

Code:

/**

 * Ermittelt die aktuell mögliche Position des Funktions-Inhaltes

 * Diese Funktion wird am Ende der Menü-Bewegung aufgerufen

 *

 * @return    null

 */

function setContentPosition() {

    var breiteNavbar = $('#nav-container').width(),

        breiteDocument = $(document).width()

    ;

    // Galerie-Position setzen, Text-Position setzen

    if (breiteDocument > mobileStyle) {

        $('#content, #content2').css({

            'left': parseInt(breiteNavbar - 100) + 'px',

            'width': '70%'

        });

    } 

    else {

        $('#content, #content2').css({

            'left': '0px',

            'width': '100%'

        });

    }

}



/**

 * Erzeugung der Hauptnavigations als UL-Objekt

 * Es wird unterschieden, ob der Eintrag ein Link

 * oder ein Hilfsobjekt ist

 *

 * @return    null

 */

function iniMenu() {

    // Galiern laden und entsprechend anzeigen

    $.each(navigation, function(index, value) {

        if (index.length) {

            // Teilstring ermitteln (Link oder nicht)

            var teil = index.substring(0, 5);

            if (teil == 'dummy') {

                $('#navigation').append('<li class="trenner"><span>' + value + '</span></li>');

            } else {

                var loader = 'page',

                    infotext, Css

                ;

                

                if (value['info'].length) {

                    infotext = ' title="' + value['info'] + '"';

                }

                if (value['class'].length) {

                    Css = ' class="' + value['class'] + '"';

                } 

                if (value['type'] == 'galery') {

                    loader = 'galery';

                }



                $('#navigation').append('<li class="link" id="nav-' + index + '">' + '<a href="javascript:void(0);" onclick="loadContent' + '(\'' + index + '\', \'' + loader + '\')' + '"' + infotext + Css + '>' + value['name'] + '</a>' + '</li>');

            }

        }

    });

}



/**

 * Inhalt in den Hauptbereich laden

 * Je nach Modus werden entweder die Galerien oder eine HTML-Seite angezeigt

 * Der inaktive Content wird auf Default zurückgesetzt

 *

 * @param     string     zu ladender Inhalt beim Klicken

 * @param     string     'galery' oder 'page'

 * @return    null

 */

function loadContent(type, mode) {

    if (mode == undefined) {

        // Wenn der Modus unbekannt ist, dann abbrechen

        return;

    }



    // Je nach Modus die Container definieren

    var ziel = $('#content2'),

        old = $('#content')

    ;

    if (mode == 'galery') {

        ziel = $('#content');

        old = $('#content2');

    } 



    if ($('#mobile-nav li').length > 0) {

        $('#mobile-nav').fadeOut('fast');

    }



    // inaktiven Container ausblenden

    old.fadeOut('fast');



    if (type.length) {

        // Navigation ist Mittig? dann nach links bewegen

        if (firstRun == 0) {

            // Navigation bewegen

            moveNavigation(type, mode);



            // Inhalt setzen

            setContentPosition();



            // Inhalt wartet, bis die Navigation links angekommen ist

            ziel.delay(runtimeNav);

        } else {

            // Navigations-Status prüfen

            setNavigationStatus();

        }



        // Die Seite nur laden, wenn sich der Klick geändert hat und der Modus definiert ist

        if (type != lastType && mode != undefined) {

            $('#nav-' + lastType + ' a').removeClass('active');



            // Inhalt ausblenden und firsch laden

            ziel.fadeOut('fast', function() {

                // inaktiven Container zusätzlich unsichtbar machen

                old.css('display', 'none');



                // Inhalt aus Config.js laden

                if (mode == 'galery') {

                    old.html('');

                    getInhalt2Content(type);

                } else {

                    old.load('./pages/lightbox.htm');

                    ziel.load('./pages/' + type + '.htm');

                }



                // Inhalt anzeigen

                ziel.fadeIn('fast');



                $('#nav-' + type + ' a').addClass('active');



                lastType = type;

            });

        }

    } else {

        alert('Content-Type <' + type + '> not available');

    }

}



/**

 * Bilder aus dem Config-Array in die Gallerie laden

 *

 * @return    null

 */

function getInhalt2Content(type) {

    // Galerie erzeugen

    $('#content').html('<div class="image-set"></div>');

    var $imageSet = $('.image-set');

    

    $.each(data[type], function(index, value) {

        var info;

        // Prüfen, ob in Info etwas enthalten ist

        if (value['info'].length) {

            info = '<br />' + value['info'];

        }

        // Bild erzeugen

        var image = '<a href="data/big/' + value['image'] + '" class="image-link" ' + 'data-title="' + value['titel'] + info + '" data-lightbox="' + type + '-set">' + '<img src="./data/thumb/' + value['thumb'] + '" class="image-thumb" title="' + value['titel'] + '" />' + '</a>';



        // erzeugtes Bild an die Galie anhängen

        $imageSet.append(image);

    });

}

nö :D

jaja -- du hast ja recht *grmpf

Super Arbeit. :spinny::spinny:

warum arbeitest du bei der Navi nicht auch mit Media Querys wie beim Kontaktformular? Dann sparst du dir dafür das Javascript geraffel

werde ich wahrscheinlich auch so umbauen ...
hab gerade das "geflacker" der Hintergründe abgeschaltet ...
und dabei noch nen "Logik-Bug" ausgebügelt ...

Parameters laufen nun auch "smootie" :D

Werde erst mal schauen, was die "Kundin" dazu sagt und wie es genau weiter entwickelt wird ....

Also, ich bin sehr unerfahren und leicht zu beeindrucken - aber für mit der heißen Nadel gestrickt ist das sehr schick finde ich.
Für jemanden der gar keine Ahnung hat (wie die Tutoren anscheinend) wahrscheinlich eine Offenbarung :D