Javascript Problem auf mobile device

Hallo Zusammen,

Ich habe im Verlaufe meines Architekturstudiums begonnen ein Webportfolio aufzubauen. => http://www.michelandreas.ch

Dazu habe ich den Grundcode von dieser Vorlage modifiziert. => http://manos.malihu.gr/simple-…-fullscreen-image-gallery

Im Web funktioniert alles wunderbar. Allerdings treten auf mobilen Geräten Probleme mit dem Navigationsslider im unteren Bereich der Webseite auf.

Ich habe ehrlichgesagt nicht gerade viel Ahnung was das Coden von Webseiten angeht. Desswegen kann ich das Problem nicht näher beschreiben.

Es ist für mich ein wunder, dass ich überhaupt so weit gekommen bin

Vielleicht kann mir ja jemand von euch bei meinem Problem weiterhelfen.

PS: Ich benutze Adobe Dreamweaver zum bearbeiten der Webseite.

Solltet Ihr weitere Infos benötigen schreibt mich einfach an.

Vielen, vielen Dank für eure Hilfe

ok.

Auf der Webseite ist es so, dass wenn man mit der Maus über die Position der Navigationsleiste fährt, diese Erscheint. Wenn man die Position verlässt, verschwindet sie. Wenn ich mich mit der Maus auf dem Element befinde kann ich nach links und rechts navigieren, so dass ich Bilder oder Icons auswählen kann.

Ein Beispiel:

Auf der Frontseite ist es so, dass wenn ich auf ein Icon klicke, es mich zum betreffenden Link führt. Z.b Architektur Icon auswählen, anklicken => ich werde zum Architektur html geführt.

Auf der Architekturseite ist ebenfalls ein Navigationselement vorhanden. Allerdings handelt es sich beim content dieses Navigationselementes um Tumbnails, die beim draufklicken den inhalt des entsprechendem Tumbnail in voller Bildschirmgrösse darstellen.

Problembeschrieb:

Auf dem Pc kann ich mit der Maus über das Navigationselement drüberfahren ohne dass es stockt. je nach Mausbewegung schiebt sich der content des Navigationselementes nach links und rechts. Alles funktioniert Perfekt. kein stocken und ruckeln, ausser wenn Bilder geladen werden müssen.

Auf einem Smartphone sieht das ganze schon anders aus. Wenn ich mit dem Finger über das Navigationselement fahre, bewegt sie sich nicht flüssig hin und her. Sie bewegt sich eher Abgehackt und unpräzise. Wenn ich nun mit dem Finger einen gewünschten Content auswählen will, wählt es mit meistens irgendetwas aus, dass sich weiter rechts oder links im Navigationselement befindet.

z.B Ich schaue mir auf dem Handy meine Frontseite an und wähle mit dem Finger das Design icon aus => ich werde aber zu "Kunst" weitergeleitet.

Ich vermute, dass irgendwo touch befehle oder sowas fehlen, denn irgendwie ist ja ein touchgerät nun mal keine Maus^^

Hier ist der komplette Javascript von meiner Seite, der den Navigationsslider steuert, Die Elemente wo ich vermute, dass sie etwas mit dem Problem zu tun haben, habe ich jetzt mal rot markiert.

<script>

//config

//set default images view mode

$defaultViewMode="full"; //full, normal, original

$tsMargin=0; //first and last thumbnail margin (for better cursor interaction)

$scrollEasing=0; //scroll easing amount (0 for no easing)

$scrollEasingType="easeOutCirc"; //scroll easing type

$thumbnailsContainerOpacity=0.8; //thumbnails area default opacity

$thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out

$thumbnailsOpacity=0.6; //thumbnails default opacity

$nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")

$keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")

//cache vars

$thumbnails_wrapper=$("#thumbnails_wrapper");

$outer_container=$("#outer_container");

$thumbScroller=$(".thumbScroller");

$thumbScroller_container=$(".thumbScroller .container");

$thumbScroller_content=$(".thumbScroller .content");

$thumbScroller_thumb=$(".thumbScroller .thumb");

$preloader=$("#preloader");

$toolbar=$("#toolbar");

$toolbar_a=$("#toolbar a");

$bgimg=$("#bgimg");

$img_title=$("#img_title");

$nextImageBtn=$(".nextImageBtn");

$prevImageBtn=$(".prevImageBtn");

$(window).load(function() {

$toolbar.data("imageViewMode",$defaultViewMode); //default view mode

if($defaultViewMode=="full"){

$toolbar_a.html("<img src='../Zus%C3%A4tzliche%20Dateien/Navigation/toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");

} else {

$toolbar_a.html("<img src='../Zus%C3%A4tzliche%20Dateien/Navigation/toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");

}

ShowHideNextPrev($nextPrevBtnsInitState);

//thumbnail scroller

$thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin

sliderLeft=$thumbScroller_container.position().left;

sliderWidth=$outer_container.width();

$thumbScroller.css("width",sliderWidth);

var totalContent=0;

fadeSpeed=200;

var $the_outer_container=document.getElementById("outer_container");

var $placement=findPos($the_outer_container);

$thumbScroller_content.each(function () {

var $this=$(this);

totalContent+=$this.innerWidth();

$thumbScroller_container.css("width",totalContent);

$this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);

});

$thumbScroller.mousemove(function(e){

if($thumbScroller_container.width()>sliderWidth){

var mouseCoords=(e.pageX - $placement[1]);

var mousePercentX=mouseCoords/sliderWidth;

var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));

var thePosA=mouseCoords-destX;

var thePosB=destX-mouseCoords;

if(mouseCoords>destX){

$thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing

} else if(mouseCoords<destX){

$thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing

} else {

$thumbScroller_container.stop();

}

}

});

$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);

$thumbnails_wrapper.hover(

function(){ //mouse over

var $this=$(this);

$this.stop().fadeTo("slow", 1);

},

function(){ //mouse out

var $this=$(this);

$this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);

}

);

$thumbScroller_thumb.hover(

function(){ //mouse over

var $this=$(this);

$this.stop().fadeTo(fadeSpeed, 1);

},

function(){ //mouse out

var $this=$(this);

$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);

}

);

//on window resize scale image and reset thumbnail scroller

$(window).resize(function() {

FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));

$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc");

var newWidth=$outer_container.width();

$thumbScroller.css("width",newWidth);

sliderWidth=newWidth;

$placement=findPos($the_outer_container);

});

//load 1st image

var the1stImg = new Image();

the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);

the1stImg.src = $bgimg.attr("src");

$outer_container.data("nextImage",$(".content").first().next().find("a").attr("href"));

$outer_container.data("prevImage",$(".content").last().find("a").attr("href"));

});

function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){

$this.fadeOut("fast",function(){

$this.attr("src", "").attr("src", imgSrc); //change image source

FullScreenBackground($this,imageWidth,imageHeight); //scale background image

$preloader.fadeOut("fast",function(){$this.fadeIn("slow");});

var imageTitle=$img_title.data("imageTitle");

if(imageTitle){

$this.attr("alt", imageTitle).attr("title", imageTitle);

$img_title.fadeOut("fast",function(){

$img_title.html(imageTitle).fadeIn();

});

} else {

$img_title.fadeOut("fast",function(){

$img_title.html($this.attr("title")).fadeIn();

});

}

});

}

//mouseover toolbar

if($toolbar.css("display")!="none"){

$toolbar.fadeTo("fast", 0.4);

}

$toolbar.hover(

function(){ //mouse over

var $this=$(this);

$this.stop().fadeTo("fast", 1);

},

function(){ //mouse out

var $this=$(this);

$this.stop().fadeTo("fast", 0.4);

}

);

//Clicking on thumbnail changes the background image

$("#outer_container a").click(function(event){

var $this=$(this);

if(!$this.hasClass("link")) {

event.preventDefault();

}

GetNextPrevImages($this);

GetImageTitle($this);

SwitchImage(this);

ShowHideNextPrev("show");

});

//next/prev images buttons

$nextImageBtn.click(function(event){

event.preventDefault();

SwitchImage($outer_container.data("nextImage"));

var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");

GetNextPrevImages($this);

GetImageTitle($this);

});

Ich hoffe, das ich jetzt ein bisschen ausführlicher war und hoffe, dass wir so meinem Ziel näher kommen.

Sollte noch etwas wichtiges fehlen, einfach schreiben.

Vielen Dank.