hallo zusammen,
mit Hilfe vieler Codeschnipsel im Netz habe ich eine Bildergalerie in Form einer "Tapete" erstellt. Diese Seite funktioniert auch ganz gut.
Jetzt würde ich gern die Seite automatisch rauf und runter scrollen lassen, wenn der User einige Zeit nichts macht. Leider habe ich keine der Lösungen im Netz umsetzen können.
Wo muss ich z.B. folgende js-Funktion in meinem Code einfügen?
Hier der Quell-Code meiner Seite:
Auch wenn ich jQuery.ScrollTo benutze, muss ich ja wissen, wo genau ich die Funktion dann aufrufen muss.
Vielen Dank für Eure Hilfe...
mit Hilfe vieler Codeschnipsel im Netz habe ich eine Bildergalerie in Form einer "Tapete" erstellt. Diese Seite funktioniert auch ganz gut.
Jetzt würde ich gern die Seite automatisch rauf und runter scrollen lassen, wenn der User einige Zeit nichts macht. Leider habe ich keine der Lösungen im Netz umsetzen können.
Wo muss ich z.B. folgende js-Funktion in meinem Code einfügen?
HTML:
<script type="text/javascript">
window.onload = function(){
var step = 1;
window.setInterval(function(){
var oldScrollTop = window.document.documentElement.scrollTop;
window.scrollBy(0, step);
if (oldScrollTop == window.document.documentElement.scrollTop) step *= -1;
}, 10);
};
</script>Hier der Quell-Code meiner Seite:
HTML:
<html lang="de-de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Alle Bilder</title>
<meta name="description" content="...">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- CSS Reset -->
<link rel="stylesheet" href="css/normalize.css">
<!-- Magnific popup styles -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Global CSS for the page and tiles -->
<link rel="stylesheet" href="css/main.css">
<!-- Specific CSS for the example -->
<style>
.tiles-wrap li {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tiles-wrap li img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="top">
<header><h1>Alle Bilder</h1></header>
<div role="main">
<ul id="container" class="tiles-wrap">
<?php
$d = array( "ordner 1",
"ordner 2", ...
);
?>
<!-- alle bilder eines ordners laden und in ul als li eintragen -->
<?php
foreach ($d as $ordner) {
$alledateien = scandir($ordner);
foreach ($alledateien as $datei) {
$dateiinfo = pathinfo($ordner."/".$datei);
$size = ceil(filesize($ordner."/".$datei)/1024);
if ($datei != "." && $datei != ".." && $datei != "_notes") {
?>
<li>
<a href="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>">
<img class="lazy" src="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>" width="150" height="auto">
</a>
<p><?php echo $dateiinfo['filename'];?></p>
</li>
<?php
};
};
}
?>
<!-- -->
</ul>
</div>
<div id="div1" style="position:fixed; right:30px; bottom:12px;">
<a href="#top"><img title="Nach oben scrollen" alt="Nach oben scrollen" src="css/arrow_big_white_up.png" /> </a>
</div>
<div id="div2" style="position:absolute; left:30px; top:12px;">
<a href="#" onclick="history.back(); return false"><img title="Zurück" alt="Zurück" src="css/arrow_big_white_lt.png" /> </a>
</div>
</div>
<!-- include smoothscroll -->
<script src="js/smoothscroll.js"></script>
<!-- include jQuery -->
<script src="js/jquery.min.js"></script>
<!-- include jQuery -->
<script src="js/jquery.lazyload.js"></script>
<!-- Include the imagesLoaded plug-in -->
<script src="js/imagesloaded.pkgd.min.js"></script>
<!-- include magnific popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- Include the plug-in -->
<script src="js/wookmark.js"></script>
<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
$(function() {
$("img.lazy").lazyload();
});
(function() {
function getWindowWidth() {
return Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
}
// Instantiate wookmark after all images have been loaded
var wookmark;
// ------------------------------------
// Init lightbox
$('#container').magnificPopup({
delegate: 'li:not(.inactive) a',
type: 'image',
gallery: {
enabled: true
}
});
// ------------------------------------
imagesLoaded('#container', function() {
wookmark = new Wookmark('#container', {
itemWidth: 300, // Optional min width of a grid item
outerOffset: 20, // Optional the distance from grid to parent
flexibleWidth: function () {
// Return a maximum width depending on the viewport
return getWindowWidth() < 1024 ? '100%' : '50%';
}
});
});
})();
</script>
</body>
</html>Auch wenn ich jQuery.ScrollTo benutze, muss ich ja wissen, wo genau ich die Funktion dann aufrufen muss.
Vielen Dank für Eure Hilfe...
Zuletzt bearbeitet:
. Es muss