Exemplo de Galeria de Imagem

[Gilberto Jr 26]

Bom dia,

 

Eu preciso da ajuda de vocês, eu preciso de uma galeria que faz o mesmo processo dessa aqui desse site http://www.atecengenharia.com.br/.

 

Hoje eu estou usando flash mas eu quero mudar pois assim fica mais pratico para o cliente.

 

Att;

[William Bruno 1501]

bem simples cara, implementa na mão.

 

uma foto grande com position absolute, q vai ganhando top negativo, até trocar de imagem.

[Gilberto Jr 26]

Você poderia colocar esse script ai ou me passar um exemplo que eu possa ver?

 

 

Alguem tem algum exemplo ai que o William Bruno disse que é simples.

 

Eu sei que é chato mas vocês tem algum exemplo ai?

 

@descricaodorock

[Gilberto Jr 26]

William Bruno você poderia me ajudar nessa questão? Pode me ajudar a criar essa galeria?

 

Att;

[William Bruno 1501]

Opa, fiz esse slideshow aqui:

 

https://github.com/wbruno/slideshow

 

 

o exemplo flash.html tem exatamente oque vc quer.

[Gilberto Jr 26]

Resolveu a minha situação

• William Bruno

[Gilberto Jr 26]

William Bruno essa galeria vertical resolve o meu problema. Só que o seguinte, se a galeria tiver 10 fotos o sistema faz o loop das fotos de 1 a 10.

 

Só que quando chega na foto 10 o sistema volta para a 1 novamente fazendo um tipo "prev" passando por todas as fotos até chegar a foto 1 novamente.

 

Eu queria fazer que o sistema fizesse o loop sem chegar ao fim retornar mostrando as 9 fotos e começando o slide da foto 1 novamente.

 

A galeria que eu queria deveria ser assim 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 e assim por diante. Nunca para o slide.

 

Aqui segue o código do slideshow.js

/**
 * @file slideshow.js
 * @author William Bruno
 * @date 2013-05-25
 */
var adcast = (function() {
    "use strict";
    /*global window:false */
    var adcast = {
        timer : 0,
        atual : 0,
        max : 1,
        delay : 4000,
        each : function($elements, cb) {
            var i = $elements.length;
            while (i--) {
                cb($elements[i]);
            }
        },
        init : function(config) {
            adcast.$adcastWrap = config.adcasts[0].parentNode;
            adcast.$adcasts = config.adcasts;
            adcast.$pagers = config.pagers;
            adcast.onChange = config.onChange;

            adcast.max = adcast.$adcasts.length;

            if (!adcast.max || adcast.max === 1) {
                return;
            }

            adcast.next();
            adcast.auto();
            adcast.events();
        },
        active : function() {
            var i = adcast.atual;
            adcast.$adcasts[i].classList.add('is-active');
            adcast.$pagers[i].classList.add('is-active');
            adcast.$adcastWrap.className = 'adcast-item-' + i;

            if(adcast.onChange) {
                adcast.onChange(i);
            }
        },
        none : function() {
            adcast.each(adcast.$adcasts, function($adcast) {
                $adcast.classList.remove('is-active');
            });
            adcast.each(adcast.$pagers, function($pager) {
                $pager.classList.remove('is-active');
            });
        },
        next : function() {
            var i = adcast.atual;

            adcast.none();
            adcast.active();

            adcast.atual = i < adcast.max - 1 ? parseInt(i, 10) + 1 : 0;
        },
        auto : function() {
            adcast.timer = window.setInterval(function() {
                adcast.next();
            }, adcast.delay);
        },
        events : function() {
            var $adcast = adcast;
            adcast.each(adcast.$pagers, function($element) {
                $element.addEventListener('mouseover', function() {
                    var $this = this,
                        i = $this.getAttribute('data-adcast');

                    adcast.atual = i;
                    window.clearInterval(adcast.timer);
                    $adcast.none();
                    $adcast.active();
                });
                $element.addEventListener('mouseout', function() {
                    var $this = this,
                        i = $this.getAttribute('data-adcast');

                    adcast.atual = i < adcast.max - 1 ? parseInt(i, 10) + 1 : 0;
                    adcast.auto();
                });

            });
        }
    };

    return {
        init : adcast.init
    };

}());

 

 

Att;

[Gilberto Jr 26]

Bom, eu consegui resolver a situação.

 

Segue o código

<html>
<head>
<title>Galeria Imagem ScrollUp</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#slide_fotos').cycle({
//		fx:'blindX',
//		fx:'blindY',
//		fx:'blindZ',
//		fx:'cover',
//		fx:'curtainX',
//		fx:'curtainY',
//		fx:'fade',
//		fx:'fadeZoom',
//		fx:'growX',
//		fx:'growY',
//		fx:'none',
		fx:'scrollUp',
//		fx:'scrollDown',
//		fx:'scrollLeft',
//		fx:'scrollRight',
//		fx:'scrollHorz',
//		fx:'scrollVert',
//		fx:'shuffle',
//		fx:'slideX',
//		fx:'slideY',
//		fx:'toss',
//		fx:'turnUp',
//		fx:'turnDown',
//		fx:'turnLeft',
//		fx:'turnRight',
//		fx:'uncover',
//		fx:'wipe',
//		fx:'zoom',
		pager: '#pager',
		speed: 4700,
		timeout: 4000,
	});
});
</script>
<style type="text/css">
* {
	list-style: none;
	margin: 0;
	padding: 0;
}
body {
	font: 12px Verdana, sans-serif;
	color: #000;
}
a { text-decoration: none; color:#000;	background:url('img/over_white.png');}
a:hover { text-decoration: underline; }
#slideshow {
	width: 800px;
	height: 310px;
	position: relative;
	margin:auto;
	margin-top:5px;
}
#slideshow img{
	width: 800px;
	height: 310px;
}
#slide_fotos p {
	position: absolute;
	right: 0;
	/*top: 234px;*/
	bottom:0px;
	z-index: 3;
	padding: 10px 20px;
	background: url('img/over_white.png');
	width:800px;
	text-align:center;
}
#slide_fotos {
	height: 100%;
	overflow: hidden;
}
#pager {
	position: absolute;
	z-index: 10;
	top: 20px;
	right: 20px;
	color:#000;
	display:none;
	background: url('img/over_white.png');	
}
#pager a {
	color: #000;
	width: 17px;
	height: 17px;
	line-height: 15px;
	text-align: center;
	display: inline-block;
	font-size: 10px;
	margin: 2px;
}
#pager a.activeSlide {
	color: #000;
	background: url('img/over_white.png');
}
</style>
</head>
<body>
	<div id="slideshow">
		<ul id="slide_fotos">
			<li><img src="img/foto.jpg" alt="" title="Foto 01" />
				<p>Primeira Imagem, céu azul!</p>
                </li>
			<li><img src="img/foto2.jpg" alt="" title="Foto 02" />
				<p>Segunda Imagem, queda d'agua</p>
                </li>
			<li><img src="img/foto3.jpg" alt="" title="Foto 03" />
				<p>Terceira Imagem, universo, negro</p>
                </li>
			<li><img src="img/foto4.jpg" alt="" title="Foto 04" />
				<p>Quarta Imagem, praia calmaria</p>
                </li>
			<li><img src="img/foto5.jpg" alt="" title="Foto 05" />
				<p>Quinta Imagem, montanhas, lago</p>
                </li>
			<li><img src="img/foto6.jpg" alt="" title="Foto 06" />
				<p>Sexta Imagem, mais verde natureza</p>
                </li>
           <li><img src="img/foto7.jpg" alt="" title="Foto 07">
           		<p>Setima Imagem, mais verde natureza</p>
           </li>
           <li><img src="img/foto8.jpg" alt="" title="Foto 07">
           		<p>Setima Imagem, mais verde natureza</p>
           </li>
           <li><img src="img/foto9.jpg" alt="" title="Foto 07">
           		<p>Setima Imagem, mais verde natureza</p>
           </li>
           <li><img src="img/foto10.jpg" alt="" title="Foto 07">
           		<p>Setima Imagem, mais verde natureza</p>
           </li>                      
		</ul><!-- /fotos -->
		<p id="pager">

		</p><!-- /pager -->
	</div><!-- /slideshow -->
</body>
</html>

Att;

.