I'm using quovolver to display a series of quotes but I would like them to be in a random order. There is a solution that already exists that I tried to get to work but I couldn't, which is here. Perhaps Quovolver has been updated since 2012. Anyway, here is a snippet of my code:
Here is the HTML:
<head>
<script type="text/javascript" src="vendor\sebnitu-Quovolver-v2.0.2-22-g9e598ea\sebnitu-Quovolver-9e598ea\jquery.quovolver.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $items = $('.quovolver .quote');
var quovolver = $('.quovolver');
var newItems = [];
$.each($items, function(i, quote) {
var $copy = $(quote);
newItems.push($copy);
$copy.remove();
});
var random;
var chosenRandom = [];
for (var i = 0; i < newItems.length - 1; i++) {
random = Math.floor(Math.random() * newItems.length);
while ($.inArray(random, chosenRandom) != -1) {
random = Math.floor(Math.random() * newItems.length);
}
chosenRandom.push(random);
quovolver.append(newItems[random]);
}
$('div.quovolver').quovolver({autoPlaySpeed : 10000});
});
</script>
</head>
<body>
<div class="fr_container_99">
<div class="quovolver">
<div class="fr_paragraph_center_20">
<div class="fr-text">'... Ocian in view! O! the joy! ...'</div>
<div class="fr-text"><br>- Captain William Clark upon seeing the Columbia River estuary, Nov. 7, 1805</div>
</div>
<div class="fr_paragraph_center_24">
<div class="fr-text">`Turbulence is the most important unsolved problem of classical physics.'</div>
<div class="fr-text"><br>- Richard Feynman</div>
</div>
<div class="fr_paragraph_center_58">
<div class="fr-text">"The winds, the sea, and the moving tides are what they are. If there is wonder and beauty and majesty in them, science will discover these qualities... If there is poetry in my book about the sea, it is not because I deliberately put it there, but because no one could write truthfully about the sea and leave out the poetry."</div>
<div calss="fr-text"><br>- Rachel Carson</div>
</div>
<div class="fr_paragraph_center_33">
<div class="fr-text">"Three things cannot be long hidden: the sun, the moon, and the truth."</div>
<div class="fr-text">- Buddha</div>
</div>
</div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire