Ciao,
ho una gallery coverflow che funziona benissimo ed è anche molto semplice.
L'unica pecca che ha è che aggiungendo dei link alle immagini nel classico modo <a href="link.html"><img class="cover" src="imgs/01.jpg"/></a>, la gallery non gira più come dovrebbe poichè cliccando sulle immagini successive, invece di scorrere, va diretta in un'altra pagina.
C'è un altro modo per inserire un link alle immagini, aggiungendo un prametro allo script?
Questo è il codice della gallery:
Spero che qualcuno possa darmi un'illuminazione in merito!
Grazie!!!!!!
ho una gallery coverflow che funziona benissimo ed è anche molto semplice.
L'unica pecca che ha è che aggiungendo dei link alle immagini nel classico modo <a href="link.html"><img class="cover" src="imgs/01.jpg"/></a>, la gallery non gira più come dovrebbe poichè cliccando sulle immagini successive, invece di scorrere, va diretta in un'altra pagina.
C'è un altro modo per inserire un link alle immagini, aggiungendo un prametro allo script?
Questo è il codice della gallery:
HTML:
<script>
$(function() {
function tabsToSpaces(line, tabsize) {
var out = '',
tabsize = tabsize || 4,
c;
for (c in line) {
var ch = line.charAt(c);
if (ch === '\t') {
do {
out += ' ';
} while (out.length % tabsize);
} else {
out += ch;
}
}
return out;
}
function visualizeElement(element, type) {
var code = $(element).html().split('\n'),
tabsize = 4,
minlength = 2E53,
l;
// Convert tabs to spaces
for (l in code) {
code[l] = tabsToSpaces(code[l], tabsize);
}
// determine minimum length
var minlength = 2E53;
var first = 2E53;
var last = 0;
for (l in code) {
if (/\S/.test(code[l])) {
minlength = Math.min(minlength, /^\s*/.exec(code[l])[0].length);
first = Math.min(first, l);
last = Math.max(last, l);
}
}
code = code.slice(first, last + 1);
// strip tabs at start
for (l in code) {
code[l] = code[l].slice(minlength);
}
// recombine
code = code.join('\n');
var fragment = $('<pre class="prettyprint"><code/></pre>').text(code).insertAfter(element);
$('<h3 class="clickable">'+type+'…</h3>').insertBefore(fragment).click(function() {
fragment.slideToggle();
});
}
// extract html fragments
$('div.prettyprint, span.prettyprint').each(function() {
visualizeElement(this, 'HTML');
});
// extract scripts
$('script.prettyprint').each(function() {
visualizeElement(this, 'Javascript');
});
// Include the readme
var markdown = new Markdown.Converter();
$.get('README.md', function(readme) {
$('#readme').html(markdown.makeHtml(readme));
$('#readme h1').each(function() {
$(this).nextUntil('h1').wrapAll('<div class="chapter"/>');
});
$('#readme pre').addClass('prettyprint');
prettyPrint();
// build menu
var menuitems = [];
$('h1').each(function() {
var text = $(this).text(),
id = $(this).attr('id') || 'chapter '+text;
$(this).attr('id', id);
menuitems.push('<a href="#'+id+'">'+text+'</a>');
});
$(menu).html(menuitems.join(' — '));
}, 'html');
});
</script>
<!-- Plugin -->
<script src="jquery.coverflow.js"></script>
<!-- Optionals -->
<script src="jquery.interpolate.js"></script>
<script src="jquery.mousewheel.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
<script src="reflection.js"></script>
</head>
<body>
<a href="https://github.com/vanderlee/coverflow"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<div id="menu"></div>
<div id="preview">
<div id="preview-coverflow">
<img class="cover" src="imgs/01.jpg"/>
<img class="cover" src="imgs/02.jpg"/>
<img class="cover" src="imgs/03.jpg"/>
<img class="cover" src="imgs/04.jpg"/>
<img class="cover" src="imgs/05.jpg"/>
<img class="cover" src="imgs/06.jpg"/>
<img class="cover" src="imgs/07.jpg"/>
<img class="cover" src="imgs/08.jpg"/>
</div>
<style>
#preview {
padding-bottom: 100px;
}
#preview-coverflow .cover {
cursor: pointer;
width: 320px;
height: 240px;
box-shadow: 0 0 4em 1em white;
}
</style>
<script>
$(function() {
if ($.fn.reflect) {
$('#preview-coverflow .cover').reflect(); // only possible in very specific situations
}
$('#preview-coverflow').coverflow({
index: 6,
density: 2,
innerOffset: 50,
innerScale: .7,
animateStep: function(event, cover, offset, isVisible, isMiddle, sin, cos) {
if (isVisible) {
if (isMiddle) {
$(cover).css({
'filter': 'none',
'-webkit-filter': 'none'
});
} else {
var brightness = 1 + Math.abs(sin),
contrast = 1 - Math.abs(sin),
filter = 'contrast('+contrast+') brightness('+brightness+')';
$(cover).css({
'filter': filter,
'-webkit-filter': filter
});
}
}
}
});
});
</script>Spero che qualcuno possa darmi un'illuminazione in merito!
Grazie!!!!!!
