What is the best image/content slider to use with Omeka? I've seen discussions about WOW Slider and Gallerific and potential difficulties with Omeka. Are there examples of success stories with jQuery image sliders? Is anyone working on a specific Omeka Plugin to address this need? Thanks!
The Shortcode Carousel plugin uses jcarousel. It might do the trick for you out of the box if you are on Omeka 2.2 or higher, or be a starting place for modifications. See the shortcode documentation for more.
Hi...I am trying out the Shortcode Carousel plugin too. I try to follow the shortcode documentation, and I have the following code on a Simple page:
<p>Testing Shortcode Carousel</p>
<div>
[carousel autoscroll=true]. [featured_carousel]
</div>
But on it display it as text :
"[carousel autoscroll=true]. [featured_carousel] "
on the page not translating it to jquery -- not displaying the featured images that I would hope for.
Could please somebody tell me what I did wrong? What else do I need other that the ShortcodeCarousel and SimplePage plugins? Thanks.
It looks like what you have should work.
The first thing I'd double-check is the version of Omeka, just to make sure you have 2.2 or above. That's the first version that has shortcodes.
The next thing I'd check is whether the other shortcodes are working. That'd help figure out whether it is a problem in the core shortcode handling or in the carousel plugin.
Thanks Patrick.
I just upgraded my omeka to version 2.2.2, otherwise I cannot installed ShortcodeCarousel plugin. The SimplePage plugin is version 3.01 that come with omeka 2.2.2
> The next thing I'd check is whether the other shortcodes are working.
How can I check this?
Thanks
Ah....good point about not being able to install ShortcodeCarousel w/o 2.2. My silliness.
Checking other shortcodes would just be trying one of the other ones that are listed elsehwere on the documentation page linked above.
This might be a good quick one to try:
[recent_items num='10']No..that doesn't work either. I'll try to reinstall omeka 2.2.2, to see if it works.
Before going that drastic, I'd try reinstalling just SimplePages. You could also look in the Simple Pages plugin in the file
plugins/SimplePages/views/public/page/show.php to see if this line is in there somewhere:
echo $this->shortcodes($text);if not, that's the issue.
Thanks Patrick... yes, /SimplePages/views/public/page/show.php
does has "echo $this->shortcodes($text);"
When I upgrade the omeka 2.1.4 to 2.2.2, I just replace the whole folder of application, admin, files, bootstrap, index, etc but not the themes folder, db.ini and .htaccess...maybe there is a single file that I missed to replace the way I did the upgrade.
But when I try it on completely new folder of omeka 2.2.2 (just unzip) it, it works. Thanks.
Glad it's there!
Hi Patrick I just realize that I see double of the carousel images:
http://ualberta.ca/~mruaini/SimplepageWithShorcodeCarousel.png
Any idea why? on the Simple page I just have this one line code:<div>
[carousel]. [featured_carousel]
</div>
Thanks
Those are actually two different shortcodes. [carousel] shows the first few items returned, and [featured_carousel] shows the first few featured items. So, deleting one or the other from that line will do the trick
Thank you so much Patrick..yes that do the trick.
You're the best ;)
Hello,
I am just wondering if it is possible to add a carousel to a particular so that you could scroll through the various files attached to the particular item?
If so, how is this done please?
Hi fhya,
http://www.artsrn.ualberta.ca/FolkloreArchives/items/show/13
(click on the attach image)
for this page we have to modified show.php on the theme, grab all the images and passing them to javascript, which construct the bootstrap carousel on click event.
Hi melaniar,
Looks good, thanks. Could you explain how you modified show.php? Could you please share the code with me if you do not mind?
Thank you
Hi fhya:
In my theme/items/show.php, at the beginning when it get the files there where I collect all the images that associate with the item:
===
<!-- The following returns all of the files associated with an item. -->
<?php if (metadata($item, 'has files')): ?>
<div id="itemfiles" class="element">
<h3>Images</h3>
<div class="element-text">
<?php //the following to get all the images associate with an item and build a popup window to display all the images
$image_files = array();
$pdf_files = array();
$image_filenames = array();
$pdf_original_names = array();
$thumbnails = array();
foreach($item->Files as $f)
{
$mime = $f["mime_type"];
// echo WEB_ROOT; //http://localhost/omeka
if(isImg($mime))
{
//$file is image
$imguri = new imageUrl();
$imguri->image = $f->getProperty('fullsize_uri');
$imguri ->thumbnail = $f->getProperty('thumbnail_uri');
array_push($thumbnails, $f->getProperty('thumbnail_uri'));
array_push($image_files, $imguri);
array_push($image_filenames, metadata($f, 'filename')); //save the file name only --will be use to display the thumnail
}
else{
//pdf file or other format
$pdf_file = WEB_ROOT . '/files/original/' . metadata($f, 'filename');
array_push($pdf_files, $pdf_file);
array_push($pdf_original_names, metadata($f, 'original_filename'));
}
}
//iterate through
//only display 1st image
foreach($thumbnails as $img=>$url)//foreach loop to display the first thumbnail
{
$thumnail_url = $url;
echo '<button id="show-gallery" style="border:none;"><img src="' . $thumnail_url .'" /></button>'; //display 1st thumbnail and get out.
?>
<!--<button id="show-gallery" > View Gallery </button>-->
<?php $itmTitle = metadata($item, array('Dublin Core', 'Title')); ?>
<script type="text/javascript">
var gallery = JSON.parse('<?php echo json_encode($image_files); ?>');
var galleryTitle = <?php echo json_encode($itmTitle); ?>;
</script>
<?php
break;
} // end of foreach loop to display the first thumbnail
//display pdf files
===
Display first image as a button image and execute the js on the click event.
The js is rather long:
=====
jQuery(function($){
var imagewidget = {};
(function(){
var gallery = [];
var galleryTitle = "";
var isZoom = false;
var thumbWidth = 0;
var thumbStripWidth = 0;
var thumbPerPage = 0;
var scrollOffset = 0;
var selectedIndex = 0;
var currentPage = 0;
var scrollAnimationTime = 700;
imagewidget.setup = function(_gallery, _galleryTitle) {
gallery = _gallery;
galleryTitle = _galleryTitle
// insert modal html
var modalString = '<div class="modal fade" id="galleryModal">'+
' <div class="modal-dialog">'+
' <div class="modal-content">'+
' <div class="modal-header">'+
' <div id="close-container"><button id="close-button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></div>'+
' <div id="zoom-container"><button id="zoom-button" class="btn btn-success"><span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span></button></div>'+
' <div id="download-container"><span class="glyphicon glyphicon-download" aria-hidden="true"></span></div>'+
' <h4 class="modal-title">'+galleryTitle+'</h4>'+
' </div>'+
' <div class="modal-body">'+
' <div id="gallery-viewport">'+
' <img src="" id="gallery-image" />'+
' </div>'+
' <div id="left-container">'+
' <button id="left-page-button" href="" class="btn btn-primary"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button> '+
' <button id="left-button" href="" class="btn btn-primary"><span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span></button> '+
' </div>'+
' <div id="right-container">'+
' <button id="right-button" href="" class="btn btn-primary"><span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span></button> '+
' <button id="right-page-button" href="" class="btn btn-primary"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span></button> '+
' </div>'+
' <div id="gallery-thumbnail-strip">'+
' <div id="gallery-strip">';
$.each(gallery, function(i, v){
modalString += '<div> <img class="gallery-thumbnail unselected-thumbnail" src="'+v.thumbnail+'" /> </div>';
});
modalString += ' </div>'+
' </div>'+
' </div>'+
' </div>'+
' </div>'+
'</div>';
$("body").append($(modalString));
$(".gallery-thumbnail").click(function() {
selectedIndex = $(".gallery-thumbnail").index(this);
setImageToSelected();
});
$('#gallery-viewport').click(function(){
isZoom = ! isZoom;
setZoom();
});
$("#zoom-button").click(function(){
isZoom = ! isZoom;
setZoom();
});
var leftMove = function() {
if (--selectedIndex < 0) {
selectedIndex = 0;
}
setImageToSelected();
}
var rightMove = function() {
if (++selectedIndex >= gallery.length) {
selectedIndex = gallery.length-1;
}
setImageToSelected();
}
$('#left-button').click(function(){
leftMove()
});
$('#right-button').click(function(){
rightMove();
});
var scrollPageLeft = function() {
if (--currentPage < 0) {
currentPage = 0;
} else {
setToPage();
}
}
var scrollPageRight = function() {
if (++currentPage > Math.floor(gallery.length / thumbPerPage)) {
--currentPage;
} else {
setToPage();
}
}
$('#left-page-button').click(function() {
scrollPageLeft()
});
$('#right-page-button').click(function() {
scrollPageRight();
});
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left
leftMove();
break;
case 38: // up
isZoom = true;
setZoom();
break;
case 39: // right
rightMove();
break;
case 40: // down
isZoom = false;
setZoom();
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
}
var performScroll = function() {
var newScroll = currentPage * thumbPerPage * thumbWidth;
$( "#gallery-thumbnail-strip" ).animate({
scrollLeft: newScroll,
}, scrollAnimationTime, function() {
// Animation complete.
});
};
var setZoom = function() {
if (isZoom) {
$("#gallery-image").css('max-height', $('#gallery-image')[0].naturalHeight);
$("#gallery-image").css('max-width', $('#gallery-image')[0].naturalWidth);
$("#zoom-button span").removeClass("glyphicon-zoom-in");
$("#zoom-button span").addClass("glyphicon-zoom-out");
} else {
$("#gallery-image").css('max-height', Math.floor($('.modal-content').height() * 0.80 -60) + 'px');
$("#gallery-image").css('max-width', Math.floor($('.modal-content').width() * 0.80) + 'px');
$("#zoom-button span").removeClass("glyphicon-zoom-out");
$("#zoom-button span").addClass("glyphicon-zoom-in");
}
}
var calculatePages = function() {
thumbStripWidth = Math.floor($('.modal-content').width() - 200);
$("#gallery-thumbnail-strip").width(thumbStripWidth + 'px');
thumbWidth = $("#gallery-strip div:first").width();
thumbPerPage = Math.floor(thumbStripWidth/thumbWidth);
}
var resizeModal = function() {
$('.modal-dialog').css('width', '95%')
$('.modal-content').css('height', Math.floor($(window).height() * 0.90) + 'px')
setZoom();
var thumbnailSize = Math.floor($('.modal-content').height() * 0.23 -60) + 'px';
$(".gallery-thumbnail").css('height', thumbnailSize);
$(".gallery-thumbnail").css('width', thumbnailSize);
calculatePages();
$("#gallery-viewport").css('height', Math.floor($('.modal-content').height() * 0.80 -60) + 'px');
}
var setImageToSelected = function() {
isZoom = false;
setZoom();
$("#gallery-strip div img").removeClass('selected-thumbnail');
$("#gallery-strip div img").addClass('unselected-thumbnail');
$("#gallery-strip div:eq("+selectedIndex+") img").addClass('selected-thumbnail');
$("#gallery-image").attr("src", gallery[selectedIndex].image);
$('#download-button').attr('href', gallery[selectedIndex].image);
var selectedPage = Math.floor(selectedIndex / thumbPerPage);
if (currentPage != selectedPage){
currentPage = selectedPage;
performScroll();
}
setEnabledButtons();
}
var setToPage = function() {
performScroll();
selectedIndex = currentPage * thumbPerPage;
setImageToSelected();
}
var setEnabledButtons = function() {
if (currentPage == 0) {
$('#left-page-button').attr('disabled', 'disabled');
} else {
$('#left-page-button').removeAttr('disabled');
}
if (selectedIndex == 0) {
$('#left-button').attr('disabled', 'disabled');
} else {
$('#left-button').removeAttr('disabled');
}
if (selectedIndex == gallery.length -1) {
$('#right-button').attr('disabled', 'disabled');
} else {
$('#right-button').removeAttr('disabled');
}
if (selectedIndex != 0 && currentPage == Math.floor(gallery.length / thumbPerPage) ) {
$('#right-page-button').attr('disabled', 'disabled');
} else {
$('#right-page-button').removeAttr('disabled');
}
}
imagewidget.showGallery = function() {
$('#galleryModal').modal('show');
resizeModal();
$('#galleryModal').on('shown.bs.modal', function() {
selectedIndex = 0;
currentPage = 0;
calculatePages();
setImageToSelected();
$("#gallery-thumbnail-strip").scrollLeft(0);
});
}
$(window).resize(function() {
resizeModal();
});
})();
$("#show-gallery").click(function(){
imagewidget.showGallery();
});
imagewidget.setup(gallery, galleryTitle);
});
======
Hope that help.
Cheers,
Melania
Great! Thanks a lot, Melania!