Hilfe bei komplexem Javascript -> Bildbetrachter

SwissPHP · 21. Mai 2014

Hallo zusammen!

Ich bin neu hier und habe ein Problem, das ich nicht alleine lösen kann.
Ich hoffe, mir kann jemand helfen.
Wenn ich den footer bzw. das DIV "sp-thumbs" als position: fixed definiere, funktioniert das zwar in den Desktop-Browsern. Dies funktioniert jedoch auf mobilen Endgeräten nicht, da diese automatisch skalieren.
Das Footer-DIV soll nicht innerhalb "content" sein, sondern eben ausserhalb dieses DIV's:

Um das ganze zu verdeutlichen, untenstehend der bisherige Code

HTML wird zur Zeit so ausgegeben:

Code:

<body>
<div class="content">
<div class="content_inner">
<div class="page">
<div class="sp-wrap" style="display: inline-block;">
<div class="sp-large">
<a class="sp-current-big" href="1 - 0001.jpg"><img alt="" src="1 - 0001_small.jpg"></a>
</div>
[COLOR="#FF0000"]<div class="sp-thumbs sp-tb-active">
<a class="sp-current" href="1 - 0001.jpg"><img alt="" src="1 - 0001_small.jpg"></a><a href="1 - 0002.jpg"><img alt="" src="1 - 0002_small.jpg"></a><a href="1 - 0003.jpg"><img alt="" src="1 - 0003_small.jpg"></a><a href="1 - 0004.jpg"><img alt="" src="1 - 0004_small.jpg"></a>
</div>[/COLOR]
</div>
</div>
</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js" type="text/javascript"></script>
<script src="js/smoothproducts.min.js" type="text/javascript"></script>
<script type="text/javascript">
			/* wait for images to load */
			$(window).load( function() {
				$('.sp-wrap').smoothproducts();
			});
 </script>

</body>

sollte aber so ausgegeben werden:

Code:

<body>
<div class="content">
<div class="content_inner">
<div class="page">
<div class="sp-wrap" style="display: inline-block;">
<div class="sp-large"><a class="sp-current-big" href="1 - 0001.jpg"><img alt="" src="1 - 0001_small.jpg"></a>
</div>
</div>
</div>
</div>
</div>
[COLOR="#FF0000"]<div class="sp-thumbs sp-tb-active">
<a class="sp-current" href="1 - 0001.jpg"><img alt="" src="1 - 0001_small.jpg"></a><a href="1 - 0002.jpg"><img alt="" src="1 - 0002_small.jpg"></a><a href="1 - 0003.jpg"><img alt="" src="1 - 0003_small.jpg"></a><a href="1 - 0004.jpg"><img alt="" src="1 - 0004_small.jpg"></a>
</div>[/COLOR]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js" type="text/javascript"></script>
<script src="js/smoothproducts.min.js" type="text/javascript"></script>
<script type="text/javascript">
			/* wait for images to load */
			$(window).load( function() {
				$('.sp-wrap').smoothproducts();
			});
 </script>

</body>

Problem am Ganzen: Die HTML-Datei wird mit Hilfe von JavaScript befüllt - und ich verstehe das Script nicht.

Die Datei "smoothproducts.js":

Code:

/*
 * Smoothproducts
 * http://kthornbloom.com/smoothproducts.php
 *
 * Copyright 2013, Kevin Thornbloom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

(function($) {
    $.fn.extend({
        smoothproducts: function() {


            var slideTiming = 300

            // Add some markup & set some CSS
            $('.sp-wrap').append('<div class="sp-large"></div><div class="sp-thumbs sp-tb-active"></div>');

            $('.sp-wrap').each(function() {
                $('a', this).appendTo($('.sp-thumbs', this));
                $('.sp-thumbs a:first', this).addClass('sp-current').clone().removeClass('sp-current').appendTo($('.sp-large', this)).addClass('sp-current-big');
                $('.sp-wrap').css({
                    display: 'inline-block'
                });
            });

            // Prevent clicking while things are happening
            $(document.body).on('click', '.sp-thumbs', function(event) {
                event.preventDefault();
            });

            // Clicking a thumbnail
            $(document.body).on('click', '.sp-tb-active a', function(event) {
                $(this).parent().find('.sp-current').removeClass();
                $(this).parent().parent().find('.sp-thumbs').removeClass('sp-tb-active');
                $(this).parent().parent().find('.sp-zoom').remove();
                $(this).parent().parent().find('.sp-full-screen').fadeOut(function() {
                    $(this).remove();
                });

                var currentHeight = $(this).parent().parent().find('.sp-large').height(),
                    currentWidth = $(this).parent().parent().find('.sp-large').width();
                $(this).parent().parent().find('.sp-large').css({
                    overflow: 'hidden',
                    height: currentHeight + 'px',
                    width: currentWidth + 'px'
                });

                $(this).parent().parent().find('.sp-large a').remove();
                $(this).addClass('sp-current').clone().hide().removeClass('sp-current').appendTo($(this).parent().parent().find('.sp-large')).addClass('sp-current-big').fadeIn(slideTiming, function() {

                    var autoHeight = $(this).parent().parent().find('.sp-large img').height();

                    $(this).parent().parent().find('.sp-large').animate({
                        height: autoHeight
                    }, 'fast', function() {
                        $('.sp-large').css({
                            height: 'auto',
                            width: 'auto'
                        });
                    });

                    $(this).parent().parent().find('.sp-thumbs').addClass('sp-tb-active');
                });
                event.preventDefault();
            });

            // Zoom In
            $(document.body).on('click', '.sp-large a', function(event) {
                var largeUrl = $(this).attr('href');
                $(this).parent().parent().find('.sp-large').append('<div class="sp-zoom"><img src="' + largeUrl + '"/></div>');
                $(this).parent().parent().find('.sp-zoom').fadeIn();
                $(this).parent().parent().find(".sp-zoom").draggable();
                $(this).parent().parent().prepend('<div class="sp-full-screen"><a href="#">↕</a></div>');
                event.preventDefault();
            });

            // Open in Lightbox

            $(document.body).on('click', '.sp-full-screen', function(event) {
                var currentImg = $(this).parent().find('.sp-large .sp-zoom').html();
                $('body').append("<div class='sp-lightbox'>"+currentImg+"</div>");
                $('.sp-lightbox').fadeIn();
            });

            // Close Lightbox

            $(document.body).on('click', '.sp-lightbox', function(event) {
                $(this).fadeOut(function(){
                    $(this).remove();
                })
            });

            $(document).keydown(function(e){
                if (e.keyCode == 27) { 
                    $('.sp-lightbox').fadeOut(function(){
                        $(this).remove();
                    })
                    return false;
                }
            });


            // Panning zoomed PC

            $('.sp-large').mousemove(function(e) {
                var viewWidth = $(this).width(),
                    viewHeight = $(this).height(),
                    largeWidth = $(this).find('.sp-zoom').width(),
                    largeHeight = $(this).find('.sp-zoom').height(),
                    parentOffset = $(this).parent().offset(),
                    relativeXPosition = (e.pageX - parentOffset.left),
                    relativeYPosition = (e.pageY - parentOffset.top),
                    moveX = Math.floor((relativeXPosition * (viewWidth - largeWidth) / viewWidth)),
                    moveY = Math.floor((relativeYPosition * (viewHeight - largeHeight) / viewHeight));

                $(this).find('.sp-zoom').css({
                    left: moveX,
                    top: moveY
                });

            }).mouseout(function() {
                // Pause Panning
            });

            // Panning zoomed Mobile - inspired by http://popdevelop.com/2010/08/touching-the-web/

            $.fn.draggable = function() {
                var offset = null;
                var start = function(e) {
                    var orig = e.originalEvent;
                    var pos = $(this).position();
                    offset = {
                        x: orig.changedTouches[0].pageX - pos.left,
                        y: orig.changedTouches[0].pageY - pos.top
                    };
                };
                var moveMe = function(e) {
                    e.preventDefault();
                    var orig = e.originalEvent,
                        newY = orig.changedTouches[0].pageY - offset.y,
                        newX = orig.changedTouches[0].pageX - offset.x,
                        maxY = (($('.sp-zoom').height()) - ($('.sp-large').height())) * -1,
                        maxX = (($('.sp-zoom').width()) - ($('.sp-large').width())) * -1;
                    if (newY > maxY && 0 > newY) {
                        $(this).css({
                            top: newY
                        });
                    }
                    if (newX > maxX && 0 > newX) {
                        $(this).css({
                            left: newX
                        });
                    }
                };
                this.bind("touchstart", start);
                this.bind("touchmove", moveMe);
            };

            // Zoom Out
            $(document.body).on('click', '.sp-zoom', function(event) {
                $(this).parent().parent().find('.sp-full-screen').fadeOut(function() {
                    $(this).remove();
                });
                $(this).fadeOut(function() {
                    $(this).remove();
                });
            });

        }
    });
})(jQuery);

Und die Datei "smoothproducts.min.js":

Code:

!function(a){a.fn.extend({smoothproducts:function(){var b=300;a(".sp-wrap").append('<div class="sp-large"></div><div class="sp-thumbs sp-tb-active"></div>'),a(".sp-wrap").each(function(){a("a",this).appendTo(a(".sp-thumbs",this)),a(".sp-thumbs a:first",this).addClass("sp-current").clone().removeClass("sp-current").appendTo(a(".sp-large",this)).addClass("sp-current-big"),a(".sp-wrap").css({display:"inline-block"})}),a(document.body).on("click",".sp-thumbs",function(a){a.preventDefault()}),a(document.body).on("click",".sp-tb-active a",function(c){a(this).parent().find(".sp-current").removeClass(),a(this).parent().parent().find(".sp-thumbs").removeClass("sp-tb-active"),a(this).parent().parent().find(".sp-zoom").remove(),a(this).parent().parent().find(".sp-full-screen").fadeOut(function(){a(this).remove()});var d=a(this).parent().parent().find(".sp-large").height(),e=a(this).parent().parent().find(".sp-large").width();a(this).parent().parent().find(".sp-large").css({overflow:"hidden",height:d+"px",width:e+"px"}),a(this).parent().parent().find(".sp-large a").remove(),a(this).addClass("sp-current").clone().hide().removeClass("sp-current").appendTo(a(this).parent().parent().find(".sp-large")).addClass("sp-current-big").fadeIn(b,function(){var b=a(this).parent().parent().find(".sp-large img").height();a(this).parent().parent().find(".sp-large").animate({height:b},"fast",function(){a(".sp-large").css({height:"100%",width:"auto"})}),a(this).parent().parent().find(".sp-thumbs").addClass("sp-tb-active")}),c.preventDefault()}),a(document.body).on("click",".sp-large a",function(b){var c=a(this).attr("href");a(this).parent().parent().find(".sp-large").append('<div class="sp-zoom"><img src="'+c+'" style="height: 100%"/></div>'),a(this).parent().parent().find(".sp-zoom").fadeIn(),a(this).parent().parent().find(".sp-zoom").draggable(),/*a(this).parent().parent().prepend('<div class="sp-full-screen"><a href="#">\u2195</a></div>'),*/b.preventDefault()}),a(document.body).on("click",".sp-full-screen",function(){var c=a(this).parent().find(".sp-large .sp-zoom").html();a("body").append("<div class='sp-lightbox'>"+c+"</div>"),a(".sp-lightbox").fadeIn()}),a(document.body).on("click",".sp-lightbox",function(){a(this).fadeOut(function(){a(this).remove()})}),a(document).keydown(function(b){return 27==b.keyCode?(a(".sp-lightbox").fadeOut(function(){a(this).remove()}),!1):void 0}),a(".sp-large").mousemove(function(b){var c=a(this).width(),d=a(this).height(),e=a(this).find(".sp-zoom").width(),f=a(this).find(".sp-zoom").height(),g=a(this).parent().offset(),h=b.pageX-g.left,i=b.pageY-g.top,j=Math.floor(h*(c-e)/c),k=Math.floor(i*(d-f)/d);a(this).find(".sp-zoom").css({left:j,top:k})}).mouseout(function(){}),a.fn.draggable=function(){var b=null,c=function(c){var d=c.originalEvent,e=a(this).position();b={x:d.changedTouches[0].pageX-e.left,y:d.changedTouches[0].pageY-e.top}},d=function(c){c.preventDefault();var d=c.originalEvent,e=d.changedTouches[0].pageY-b.y,f=d.changedTouches[0].pageX-b.x,g=-1*(a(".sp-zoom").height()-a(".sp-large").height()),h=-1*(a(".sp-zoom").width()-a(".sp-large").width());e>g&&0>e&&a(this).css({top:e}),f>h&&0>f&&a(this).css({left:f})};this.bind("touchstart",c),this.bind("touchmove",d)},a(document.body).on("click",".sp-zoom",function(){a(this).parent().parent().find(".sp-full-screen").fadeOut(function(){a(this).remove()}),a(this).fadeOut(function(){a(this).remove()})})}})}(jQuery);

Und noch ein CSS-Datei-Ausschnitt:

Code:

    text-align: center;
    border-top: 2px solid #FF0000;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: url(../hg.png);
    width: 100%;
    height: 110px;

Entschuldigt, dass das ganze so gross wurde.
Ich hoffe, mir kann trotzdem jemand helfen!

Danke und Gruss,

swissPHP

rico2009 · 22. Mai 2014

Was genau hast du denn vor? Und wieso willst du das Element verschieben?

Hintergrund: Wenn du "sp-thumbs" verschiebst, wird das Script vermutlich nicht mehr funktionieren und du müsstest es umbauen. Da es was externes ist, sollte man zuerst einmal abwägen, ob es vielleicht noch andere Möglichkeiten gibt.

kkapsner · 23. Mai 2014

Ich hab' keine Ahnung, was genau dein Problem ist.
Was ist das denn für ein HTML? Ist das der Quelltext, der vom Server kommt? Wenn der anders aussehen soll, musst du ihn auf dem Server ändern.

Mach' doch mal einen Testlink mit Beschreibung, wie man den Fehler reproduzieren kann bzw. wie es aussehen sollte.

SwissPHP · 23. Mai 2014

Hallo zusammen

HTML ist aus dem DOM Explorer (F12) - also bereits vom JavaScript befüllt.

Ich habe nun einen Testlink gebaut:

http://oldtimer.pf-control.de/berichte/

Mit dem Button oben lässt sich mein Problem verdeutlichen.
Schön wäre, wenn das DIV "sp-thumbs" als fixed wäre, also am unteren Bildrand angeheftet.
Die Positionierung "fixed" wurd von Smartphones aber nicht unterstützt, also müsste das DIV "sp-thumbs" direkt dem body unterliegen.

Gruss,

swissPHP

kkapsner · 24. Mai 2014

SwissPHP schrieb:
Die Positionierung "fixed" wurd von Smartphones aber nicht unterstützt

Das ist nicht wahr: Can I use CSS position:fixed

Aber schau' doch mal, was passiert, wenn du die CSS-Klasse "sp-wrap" dem <body> gibst.

SwissPHP · 24. Mai 2014

kkapsner schrieb:
Aber schau' doch mal, was passiert, wenn du die CSS-Klasse "sp-wrap" dem <body> gibst.

Ich löschte nach deinem Tipp die beiden DIV's "content" und ".content-inner".

Danke trotzdem für eure Hilfe!

Gruss,

swissPHP

kkapsner · 25. Mai 2014

Funktioniert's jetzt in den Smartphones?

SwissPHP · 25. Mai 2014

Ja, es funktioniert soweit alles - danke nochmals!!!

kkapsner · 26. Mai 2014

Bitte - gern geschehen.

Hilfe bei komplexem Javascript -> Bildbetrachter

SwissPHP

New member

rico2009

Guest

kkapsner

Super Moderator

SwissPHP

New member

kkapsner

Super Moderator

SwissPHP

New member

kkapsner

Super Moderator

SwissPHP

New member

kkapsner

Super Moderator