-
Notifications
You must be signed in to change notification settings - Fork 40
Create a frontpage with a carousel slider showing the 10 most recent images
Thomas Kuther edited this page May 5, 2016
·
20 revisions
You will need:
- bootstrap_darkroom >= 1.1.3
- the AdditionalPages plug-in
- some Boostrap Carousel code
- a little bit of jQuery
- Create a new page in AdditionalPages plugin
- Use following content (see comments for hints on how to customize)
<!-- CSS style -->
<style type="text/css">
.navbar-secondary { display: none; } /* hide the second navbar*/
.copyright { display: none; } /* hide the footer */
.carousel { padding-top: 20px; }
.item>a>img { margin: auto; } /* center-align images in the slider */
.carousel-control { background: none !important; }
</style>
<!-- HTML code -->
<div id="last10items" class="carousel slide" data-ride="carousel">
<!-- placeholder ol for the indicator bullets, remove if you don't want them -->
<ol class="carousel-indicators">
</ol>
<!-- placeholder div for the carousel content -->
<div class="carousel-inner" role="listbox">
</div>
<!-- the left/right buttons -->
<a class="left carousel-control" href="#last10items" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#last10items" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Now, the jQuery voodoo -->
<script type="text/javascript">
/* we call the Piwigo API on our server to give us the 10 most recent images from all categories */
var pwg_api = "/ws.php?format=json&method=pwg.categories.getImages&recursive=true&per_page=10&recursive=true&order=date_available%20desc";
/* parse the result */
$.getJSON(pwg_api, function (json) {
var images = json.result.images;
/* loop over the results, and append the ol's and div's to above html skeleton */
$.each( images, function ( i, image ) {
console.log(image);
var src = image.derivatives.large.url; /* replace large with xlarge, medium, square */
var name = image.file;
var link = image.page_url;
if (i === 0) {
$('.carousel-indicators').append('<li data-target="#last10items" data-slide-to="' + i + '" class="active"></li>');
$('.carousel-inner').append('<div class="item active text-center"><a href="' + link + '"><img class="img-responsive" src="' + src + '"></img></a></div>');
} else {
$('.carousel-indicators').append('<li data-target="#last10items" data-slide-to="' + i + '"></li>');
$('.carousel-inner').append('<div class="item text-center"><a href="' + link + '"><img class="img-responsive" src="' + src + '"></img></a></div>');
}
});
});
</script>
- Frequently Asked Questions
- Plugin Support Matrix
- Video support
- EXIF Metadata in PhotoSwipe
- Make it work like Smartpocket
- Add custom CSS and Javascript
- Override the Navbar style and background
- Compile your own Bootstrap
- Add primary links to the top navigation
- Add custom share buttons
- Hide image metadata by default
- Replace default mobile webapp logo icons
- Remove the "Mail to Webadmin" link in the footer
- Pre generate custom size derivatives