Hallo zusammen!
Ich übe einmal wieder an einem vermutlich kleinem Problem.
Das Footer-DIV soll nicht innerhalb "content" sein, sondern eben ausserhalb dieses DIV's:
HTML wird zur Zeit so ausgegeben:
sollte aber so ausgegeben werden:
Problem am Ganzen: Die HTML-Datei wird mit Hilfe von JavaScript befüllt.
Die Datei "smoothproducts.js":
Und die Datei "smoothproducts.min.js":
Und noch ein CSS-Datei-Ausschnitt:
Entschuldigt, dass das ganze so gross wurde.
Ich hoffe, mir kann trotzdem jemand helfen!
Danke und Gruss,
swissPHP
Ich übe einmal wieder an einem vermutlich kleinem Problem.
Das Footer-DIV soll nicht innerhalb "content" sein, sondern eben ausserhalb dieses DIV's:
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>
<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>
</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>
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>
<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>
<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>
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);
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);
Code:
text-align: center; border-top: 2px solid #FF0000; position: absolute; bottom: 0px; left: 0px; background: url(../hg.png); width: 100%; height: 110px;
Ich hoffe, mir kann trotzdem jemand helfen!
Danke und Gruss,
swissPHP
Kommentar