[RISOLTO] Aggiungere link alle immagini

wanda

Nuovo Utente
28 Nov 2013
12
0
0
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:

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+'&hellip;</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(' &mdash; '));
				}, '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!!!!!!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, puoi provare ad aggiungere questo parametro
Codice:
confirm: 	function(event,cover) {
		      var link = $(cover).children().andSelf().filter('img').last().attr("alt");
		      location.href= link;
},
all immagine dovrai assegnare il link nell'attributo alt
HTML:
<img alt="http://forum.mrwebmaster.it" class="cover" src="imgs/01.jpg"/>
non sono molto pratico di plugin , fai delle prove
 

wanda

Nuovo Utente
28 Nov 2013
12
0
0
Grazie mille per l'immediata risposta.
Solo che essendo ignorante in javascript non ho capito dove e come poter inserire quel codice...
Sorry....
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
HTML:
<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,
            confirm: 	function(event,cover) {
                var link = $(cover).children().andSelf().filter('img').last().attr("alt");
                location.href= link;
            },
            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>
ad ogni immagine aggiugni il link nell'alt
HTML:
<img alt="http://forum.mrwebmaster.it" class="cover" src="imgs/01.jpg"/>
 

wanda

Nuovo Utente
28 Nov 2013
12
0
0
Grazieeee!! Funziona!!
Mi hai salvata ed ora è perfetto.
Grazie ancora, il tuo aiuto è stato preziosissimo!!