I am using the fotorama script for an image gallery. It took me a little bit of time to figure out the correct syntax for modifying the script so that the rotating image was clickable. (see the JS in the code below) What I'm looking to do is have each rotating image click to a different URL. For example, in the code below, image "/03.jpg" could like to "google.com", link "/04.jpg" could link to "yahoo.com", and image "/05.jpg" could link to "bing.com".
<div id="fotorama">
<a href="http://fotoramajs.com/;-)/03.jpg">
<img src="http://fotoramajs.com/;-)/th/03.jpg" alt="Masha">
</a>
<a href="http://fotoramajs.com/;-)/04.jpg">
<img src="http://fotoramajs.com/;-)/th/04.jpg" alt="Sasha">
</a>
<a href="http://fotoramajs.com/;-)/05.jpg">
<img src="http://fotoramajs.com/;-)/th/05.jpg" alt="Klava">
</a>
<a href="http://fotoramajs.com/;-)/06.jpg">
<img src="http://fotoramajs.com/;-)/th/06.jpg" alt="Dunya">
</a>
<a href="http://fotoramajs.com/;-)/07.jpg">
<img src="http://fotoramajs.com/;-)/th/07.jpg" alt="Svetlana Nikolaevna">
</a>
<a href="http://fotoramajs.com/;-)/08.jpg">
<img src="http://fotoramajs.com/;-)/th/08.jpg" alt="Zhenechka">
</a>
<a href="http://fotoramajs.com/;-)/01.jpg">
<img src="http://fotoramajs.com/;-)/th/01.jpg" alt="Potapova Yulya">
</a>
<a href="http://fotoramajs.com/;-)/09.jpg">
<img src="http://fotoramajs.com/;-)/th/09.jpg" alt="Asel">
</a>
<a href="http://fotoramajs.com/;-)/10.jpg">
<img src="http://fotoramajs.com/;-)/th/10.jpg" alt="Ekaterina">
</a>
<a href="http://fotoramajs.com/;-)/11.jpg">
<img src="http://fotoramajs.com/;-)/th/11.jpg" alt="Varya">
</a>
<a href="http://fotoramajs.com/;-)/12.jpg">
<img src="http://fotoramajs.com/;-)/th/12.jpg" alt="Marina Petrova">
</a>
<a href="http://fotoramajs.com/;-)/13.jpg">
<img src="http://fotoramajs.com/;-)/th/13.jpg" alt="Frosya">
</a>
<a href="http://fotoramajs.com/;-)/14.jpg">
<img src="http://fotoramajs.com/;-)/th/14.jpg" alt="Sonechka">
</a>
<a href="http://fotoramajs.com/;-)/15.jpg">
<img src="http://fotoramajs.com/;-)/th/15.jpg" alt="Galina">
</a>
<a href="http://fotoramajs.com/;-)/16.jpg">
<img src="http://fotoramajs.com/;-)/th/16.jpg" alt="Tatiana">
</a>
<a href="http://fotoramajs.com/;-)/17.jpg">
<img src="http://fotoramajs.com/;-)/th/17.jpg" alt="Artemida">
</a>
<a href="http://fotoramajs.com/;-)/18.jpg">
<img src="http://fotoramajs.com/;-)/th/18.jpg" alt="Sofia">
</a>
<a href="http://fotoramajs.com/;-)/19.jpg">
<img src="http://fotoramajs.com/;-)/th/19.jpg" alt="Nina">
</a>
<a href="http://fotoramajs.com/;-)/20.jpg">
<img src="http://fotoramajs.com/;-)/th/20.jpg" alt="Valentina">
</a>
<a href="http://fotoramajs.com/;-)/21.jpg">
<img src="http://fotoramajs.com/;-)/th/21.jpg" alt="Kristina">
</a>
<a href="http://fotoramajs.com/;-)/02.jpg">
<img src="http://fotoramajs.com/;-)/th/02.jpg" alt="Browny">
</a>
<a href="http://fotoramajs.com/;-)/22.jpg">
<img src="http://fotoramajs.com/;-)/th/22.jpg" alt="Gulchitai">
</a>
<a href="http://fotoramajs.com/;-)/23.jpg">
<img src="http://fotoramajs.com/;-)/th/23.jpg" alt="Elena">
</a>
<a href="http://fotoramajs.com/;-)/24.jpg">
<img src="http://fotoramajs.com/;-)/th/24.jpg" alt="Olga">
</a>
<a href="http://fotoramajs.com/;-)/25.jpg">
<img src="http://fotoramajs.com/;-)/th/25.jpg" alt="Tonya">
</a>
<a href="http://fotoramajs.com/;-)/26.jpg">
<img src="http://fotoramajs.com/;-)/th/26.jpg" alt="Feodora">
</a>
</div>
// Change ↓values↓, press ↑Run↑, see →Result→
$('#fotorama').fotorama({
width: '100%',
height: 'auto',
aspectRatio: 1.4989293362, // =700/467
minWidth: null,
maxWidth: null,
minHeight: null,
maxHeight: null,
transition: 'slide', // or 'fade'
click: true,
loop: false, // or true
autoplay: false,
stopAutoplayOnAction: true,
transitionDuration: 333,
background: null,
// 'black', '#b10000', or url(bg.png)
margin: 4,
minPadding: 8,
alwaysPadding: false,
zoomToFit: true,
cropToFit: false,
cropToFitIfFullscreen: false,
flexible: false,
fitToWindowHeight: false,
fitToWindowHeightMargin: 20,
fullscreen: false,
fullscreenIcon: false,
vertical: false,
arrows: true,
arrowsColor: null,
arrowPrev: null,
arrowNext: null,
spinnerColor: '#808080',
nav: 'thumbs', // or 'dots', or 'none'
navPosition: 'auto',
// 'top' | 'right' | 'bottom' || 'left'
navBackground: null,
dotColor: null,
thumbSize: null, // 36 or 51, whatever :-)
thumbMargin: 4,
thumbBorderWidth: 2,
thumbBorderColor: null,
// 'white', '#ff9', or even '#00ff84 #00eb89 #00b66f'
thumbsCentered: true,
hideNavIfFullscreen: false,
caption: 'overlay', // 'simple', or 'none'
preload: 3,
preloader: 'dark', // or 'white'
shadows: true,
data: null,
// e.g. [{img: 'http://fotoramajs.com/;-)/03.jpg'}, {img: 'broken.jpg'}, {img: 'http://fotoramajs.com/;-)/13.jpg'}]
html: null,
hash: false,
startImg: 0,
cssTransitions: true,
onShowImg: null,
// function(data){alert('Photo #'+(data.index+1)+' is coming!')}
onClick: function(data){
window.location = '/YourPage.html'
},
onFullscreenOpen: null,
onFullscreenClose: null,
onTransitionStop: null
});
Can someone help please? Thanks in advance.
Ok, while waiting for better solutions: (i have tested with first example)
HTML:
<h1>Fotorama example</h1>
<div class="fotorama" data-width="499" data-height="333" data-click="false">
<a href="i/01.jpg"><img src="i/thumbs/01.jpg" ></a>
<a href="i/02.jpg"><img src="i/thumbs/02.jpg" ></a>
<a href="i/03.jpg"><img src="i/thumbs/03.jpg" ></a>
</div>
Notice data-click=false -> this option is available, and it will stop 'Moving between images by clicking.'
And, now hack:
JQuery
$(window).load(function() {
links=new Array('http://www.google.com','http://www.yahoo.com','http://www.facebook.com' );
jQuery.each($(".fotorama img"), function(i) {
$(this).attr('title',links[i]);
});
$(".fotorama img").click(function() {
loc=$(this).attr('title');
//alert(loc);
window.location=loc;
});
});
This will work, but i would like to see better solution too. @Gökhan Girgin - yes, very weird, obfuscated slideshow script... :)