mlegg
06-05-2014, 06:16 PM
I am trying to use Fotorama (http://fotorama.io/) and noticed the arrows really blend into my white container. Is there a way to change the colors on the fotorama.png and fotorama@2x.png?
Also how can I center the (large) images?
<!DOCTYPE html>
<html>
<head>
<title>Basic fotorama</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script> // 1. Initialize fotorama manually.
var $fotoramaDiv = jQuery('.fotorama_custom').fotorama();
// 2. Get the API object.
var fotorama = $fotoramaDiv.data('fotorama');
// add our buttons
jQuery("<div class='fotorama_custom__arr fotorama_custom__arr--prev'><</div>").insertBefore(".fotorama__nav-");
jQuery("<div class='fotorama_custom__arr fotorama_custom__arr--next'>></div>").insertAfter(".fotorama__nav-");
// make the buttons functionality
jQuery('.fotorama_custom__arr--prev').click(function () {
fotorama.show('<');
});
jQuery('.fotorama_custom__arr--next').click(function () {
fotorama.show('>');
});
</script>
<!-- Fotorama -->
<link href="fotorama.css" rel="stylesheet">
<script src="fotorama.js"></script>
</head>
<body>
<!-- Fotorama -->
<div class="fotorama" data-autoplay="true" data-autoplay="2500" data-nav="thumbs" data-width="920" data-ratio="920/500" data-max-width="100%">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
</div>
</body>
</html>
Also how can I center the (large) images?
<!DOCTYPE html>
<html>
<head>
<title>Basic fotorama</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script> // 1. Initialize fotorama manually.
var $fotoramaDiv = jQuery('.fotorama_custom').fotorama();
// 2. Get the API object.
var fotorama = $fotoramaDiv.data('fotorama');
// add our buttons
jQuery("<div class='fotorama_custom__arr fotorama_custom__arr--prev'><</div>").insertBefore(".fotorama__nav-");
jQuery("<div class='fotorama_custom__arr fotorama_custom__arr--next'>></div>").insertAfter(".fotorama__nav-");
// make the buttons functionality
jQuery('.fotorama_custom__arr--prev').click(function () {
fotorama.show('<');
});
jQuery('.fotorama_custom__arr--next').click(function () {
fotorama.show('>');
});
</script>
<!-- Fotorama -->
<link href="fotorama.css" rel="stylesheet">
<script src="fotorama.js"></script>
</head>
<body>
<!-- Fotorama -->
<div class="fotorama" data-autoplay="true" data-autoplay="2500" data-nav="thumbs" data-width="920" data-ratio="920/500" data-max-width="100%">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
</div>
</body>
</html>