[RISOLTO] Aggiungere link alle immagini

Discussione in 'jQuery' iniziata da wanda, 9 Dicembre 2013.

  1. wanda

    wanda Nuovo Utente

    Registrato:
    28 Novembre 2013
    Messaggi:
    12
    Mi Piace Ricevuti:
    0
    Punteggio:
    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!!!!!!
     
  2. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    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
     
  3. wanda

    wanda Nuovo Utente

    Registrato:
    28 Novembre 2013
    Messaggi:
    12
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Grazie mille per l'immediata risposta.
    Solo che essendo ignorante in javascript non ho capito dove e come poter inserire quel codice...
    Sorry....
     
  4. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    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"/>
     
  5. wanda

    wanda Nuovo Utente

    Registrato:
    28 Novembre 2013
    Messaggi:
    12
    Mi Piace Ricevuti:
    0
    Punteggio:
    0
    Grazieeee!! Funziona!!
    Mi hai salvata ed ora è perfetto.
    Grazie ancora, il tuo aiuto è stato preziosissimo!!
     
  6. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    di nulla :fonzie:
     
Sto caricando...

Condividi questa Pagina