jQuery Cycle Plugin - addSlide Demo 6

Oreo · July 27, 2012 at 05:06 PM

Boas Tardes!

Queria criar este ciclo: http://jquery.malsup.com/cycle/add6.html

Não estou a compreender se tem ligação a uma base de dados ou não.

Ou se é um simples php que imprime esta parte:

/* server returns an array of slides which looks like this:

[

'images/beach2.jpg',

'images/beach3.jpg',

'images/beach4.jpg',

'images/beach5.jpg',

'images/beach6.jpg',

'images/beach7.jpg',

'images/beach8.jpg'

]

*/

Pois, quando se abre o slidelist.php aparece isto: http://jquery.malsup.com/cycle/slidelist.php

Alguma ajuda?

O que deveria colocar nesse ficheiro php?

Desde já, obrigado pelos os futuros comentários.

Cumprimentos

Edited July 27, 2012 at 05:45 PM by Oreo

pwseo · July 27, 2012 at 05:58 PM

O ficheiro slidelist.php retorna uma lista de ficheiros no formato JSON, que é lida pelo browser e utilizada para definir quais as imagens que são utilizadas.

Se a lista vem de uma base de dados ou é escrita manualmente, isso é contigo, dentro do ficheiro slidelist.php.

O que interessa é o resultado.

KiNgPiTo · July 27, 2012 at 06:07 PM

Nem mais, para criares algo parecido basta-te escrever no php:


  // Array que guarda o caminho para as imagens...
  $imagens = array("img1.jpg", "outro/caminho/img2.png", "img3.gif");

  // Escreve em json o array
  echo json_encode($imagens);

Edited July 27, 2012 at 06:08 PM by KiNgPiTo

Oreo · July 27, 2012 at 06:27 PM

Nem mais, para criares algo parecido basta-te escrever no php:


  // Array que guarda o caminho para as imagens...
  $imagens = array("img1.jpg", "outro/caminho/img2.png", "img3.gif");

  // Escreve em json o array
  echo json_encode($imagens);

Obrigado! Só está a dar um certo problema.

Eu digito no php:

<?php
// Array que guarda o caminho para as imagens...
$imagens = array("images/lib/casadecor/2/040.jpg",);
// Escreve em json o array
echo json_encode($imagens);
?>

E aparece da seguinte maneira:

["images\/lib\/casadecor\/2\/040.jpg"]

Acrescenta automáticamente o " \ " na divisão das pastas.

Edited July 27, 2012 at 06:59 PM by Oreo

KTachyon · July 27, 2012 at 07:27 PM

Penso que isso faz parte da codificação JSON. Podes fazer:

json_encode($str, JSON_UNESCAPED_SLASHES);

http://php.net/manual/en/function.json-encode.php

Oreo · July 27, 2012 at 07:38 PM

echo str_replace('\/','/',json_encode($mydatas));

Done!! Mas não está a resultar correctamente.

Aqui fica o link para verem o efeito que me está a dar:

http://limaantonio.herobo.com/pt.php?sector=projectos&div=fotografia&trabalho=5janelas

<?php
  // Array que guarda o caminho para as imagens...
  $imagens = array('images/lib/casadecor/2/004.JPG', 'images/lib/casadecor/2/040.jpg');
  // Escreve em json o array
  echo str_replace('\/','/',json_encode( $imagens ));
?>

<script type="text/javascript">
 $(function() {
// retrieve list of slides from server
$.getJSON('pt/galeria/imagens/5janelaslist.php', startSlideshow);

function startSlideshow(slides) {

	var totalSlideCount = 1 + slides.length;

	var $slideshow = $('#slideshow');

	// markup contains only a single slide; before starting the slideshow we
	// append one slide and prepend one slide (to account for prev/next behavior)
	$slideshow.prepend('<img src="'+slides.pop()+'" />');
	$slideshow.append('<img src="'+slides.shift()+'" />');

	// start slideshow
	$('#slideshow').cycle({
		fx: 'fade',
		startingSlide: 1,  // start on the slide that was in the markup
		timeout:  0,
		speed:	500,
		prev:	'#prev',
		next:	'#next',
		before:   onBefore
	});


	function onBefore(curr, next, opts, fwd) {
		// on Before arguments:
		//  curr == DOM element for the slide that is currently being displayed
		//  next == DOM element for the slide that is about to be displayed
		//  opts == slideshow options
		//  fwd  == true if cycling forward, false if cycling backward

		// on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
		if (!opts.addSlide)
			return;

		// have we added all our slides?
		if (opts.slideCount == totalSlideCount)
			return;

		// shift or pop from our slide array
		var nextSlideSrc = fwd ? slides.shift() : slides.pop();

		// add our next slide
		opts.addSlide('<img src="'+nextSlideSrc+'" />', fwd == false);
	};
};
});
</script>

<div id="slideshow">
 <img src="/images/lib/casadecor/2/004.JPG" width="680" height="475">
</div>

Edited July 27, 2012 at 08:35 PM by Oreo

HappyHippyHippo · July 27, 2012 at 10:46 PM

coloca todas as tags script dentro das tags <head></head>

Oreo · July 27, 2012 at 10:53 PM

Se por o javascript no head, depois não sei como farei para chamar o pt/galeria/imagens/5janelaslist.php no 5janelas.php. E outros nos seus respectivos php.

HappyHippyHippo · July 27, 2012 at 11:30 PM

este script de slide show é tão espetacular que se a lista de imagens a apresentar for menor que 2 elementos estoira ....

no script 'pt/galeria/imagens/5janelaslist.php' tens de verificar se envias só um elemento, se sim duplica para eliminar esta limitação do script

Oreo · July 27, 2012 at 11:48 PM

OMG!! Mas ri-me com o seu comentário.

Só estava a enviar isto: ["images/lib/casadecor/2/040.jpg"]

Dupliquei-o, o que me dá duas vezes a mesma imagem. Já é bem bom assim. Terei de por no mínimo 3 imagens.

Obrigado a todos.

Omg, isto não funciona fora do <head>.

Como farei para chamar as imagens para o seu respectivo php? Este está a chamar o pt/galeria/imagens/5janelaslist.php para o 5janela.php.

Edited July 27, 2012 at 11:48 PM by Oreo

HappyHippyHippo · July 27, 2012 at 11:53 PM

Omg, isto não funciona fora do <head>.

Como farei para chamar as imagens para o seu respectivo php? Este está a chamar o pt/galeria/imagens/5janelaslist.php para o 5janela.php.

não percebi a pergunta ...

Oreo · July 28, 2012 at 12:01 AM

Sendo que o javascript irá ficar no head, terei de arranjar uma maneira de chamar as imagens para a sua respectiva página.

Estava a pensar fazer o seguinte:

<?php
  // Array que guarda o caminho para as imagens...
  $exemplo1 = array('images/lib/casadecor/2/004.jpg', 'images/lib/casadecor/2/040.jpg', 'images/lib/casadecor/2/040.jpg');
  // Escreve em json o array
  echo str_replace('\/','/',json_encode( $exemplo ));
$exemplo2 = array('outra/directória/.jpg', 'images/lib/casadecor/2/040.jpg', 'images/lib/casadecor/2/040.jpg');
echo str_replace('\/','/',json_encode( $exemplo2 ));
?>

Este ficheiro php teria todas as imagens, e com cada hum com o seu array.

Depois fazer algo assim, no exemplo1.php:

<img src="<?php echo $exemplo1 ?>" />

Exemplo2.php:

<img src="<?php echo $exemplo2 ?>" />~

Mas não está a resultar

Acho que isto não está lá muito correcto... Acho que "imprime" todo o array. E não deve dar "lógica" ao script. Sendo que este script seria bom por causa do carregamento.

Tentado responder o que eu pretendo.

Em $.getJSON('pt/galeria/imagens/5janelaslist.php', startSlideshow), este está a carregar o 5janelalist, cujo este php faz o echo de só um trabalho, da página 5janelas, se criar outro php para por outros trabalhos, ele irá chamar novamente o 5janelalist.ph, e deveria chamar por exemplo o exemplolist.php, e entre outros.

Pois, se adicionar outra página php, teria que mudar o destinatário do 5janelaslist.php para a página respectiva.

Tipo, este 5janelaslist está a fazer referencia a 5janela.php, (a colocação do seu respectivo trabalho, com o img src), se

reproduzir o exemplo.php, este teria que ir buscar outra lista, mas, como script está no head está a fazer referencia a 5janelaslist.php. Basicamente, é esse o meu novo problema. Que o javascript está a chamar, em todas as páginas, o 5janelaslist.php.

Edited July 28, 2012 at 12:22 AM by Oreo

HappyHippyHippo · July 28, 2012 at 12:16 AM

espero que tenhas percebido o problema desse modelo de estruturação do site e porque aparecerão os "template engines" ...

Oreo · July 28, 2012 at 12:24 AM

Acha que está mal construída? Eu pensei que fosse mais dinâmico a fazer assim. Depois de concluir o slide, o site terá a sua aparência final.

Fiz desta maneira para não estar a fazer constantemente o refresh da página completa.

Só quero resolver este slide ...

Edited July 28, 2012 at 12:36 AM by Oreo

HappyHippyHippo · July 28, 2012 at 12:38 AM

acho que esta alteração resolverá o teu problema (claro que não testei):

- alteração do script que fica no header

<script type="text/javascript">
 function startSlide(listscript) {
//  $(function() { 
   // retrieve list of slides from server 
//    $.getJSON('pt/galeria/imagens/5janelaslist.php', startSlideshow); 
   $.getJSON(listscript, startSlideshow); 
   // ...
 })
</script>

- alteração do script por página

<div id="slideshow">
 ...
</div>
<script type="text/javascript">
 $(document).ready(function () {
   startSlide('<?php echo 'pt/galeria/imagens/5janelaslist.php'; ?>');
 });
</script>

Oreo · July 28, 2012 at 01:03 AM

Dá-me erro no código:

<script type="text/javascript">
$(window).load(function() {
$('#main').fadeIn();
});

function startSlide(listscript) {
//  $(function() {
// retrieve list of slides from server
//	$.getJSON('pt/galeria/imagens/5janelaslist.php', startSlideshow);
$.getJSON(listscript, startSlideshow);

function startSlideshow(slides) {

	var totalSlideCount = 1 + slides.length;

	var $slideshow = $('#slideshow');

	// markup contains only a single slide; before starting the slideshow we
	// append one slide and prepend one slide (to account for prev/next behavior)
	$slideshow.prepend('<img src="'+slides.pop()+'" />');
	$slideshow.append('<img src="'+slides.shift()+'" />');

	// start slideshow
	$('#slideshow').cycle({
		fx: 'fade',
		startingSlide: 1,  // start on the slide that was in the markup
		timeout:  0,
		speed:	500,
		prev:	'#prev',
		next:	'#next',
		before:   onBefore
	});


	function onBefore(curr, next, opts, fwd) {
		// on Before arguments:
		//  curr == DOM element for the slide that is currently being displayed
		//  next == DOM element for the slide that is about to be displayed
		//  opts == slideshow options
		//  fwd  == true if cycling forward, false if cycling backward

		// on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
		if (!opts.addSlide)
			return;

		// have we added all our slides?
		if (opts.slideCount == totalSlideCount)
			return;

		// shift or pop from our slide array
		var nextSlideSrc = fwd ? slides.shift() : slides.pop();

		// add our next slide
		opts.addSlide('<img src="'+nextSlideSrc+'" />', fwd == false);
	};
};
});
</script>

ainda estive a ver se era algum " } ".

EDIT: era o último " ) ".

Mas não está a reproduzir o slide.

Edited July 28, 2012 at 01:07 AM by Oreo

HappyHippyHippo · July 28, 2012 at 01:11 AM

EDIT: era o último " ) ".

Mas não está a reproduzir o slide.

pois é ... então porque no site ainda não tens isso alterado ?

Oreo · July 28, 2012 at 01:19 AM

pois é ... então porque no site ainda não tens isso alterado ?

Mudei logo de imediato antes de editar o post.

Desisto. Este slide está a dar bastantes erros. O melhor é fazer UM Next e um Prev, e que carregue as imagens todas umas por cima das outras. Queria fazer dessa maneira, para ser mais fiável. Paciência. Não torno a fazer sites tão cedo.

Obrigado por tudo HappyHippyHippo 😄

Edited July 28, 2012 at 01:24 AM by Oreo

HappyHippyHippo · July 28, 2012 at 01:26 AM

epa ... sinceramente ... já pensaste em usar um slide show decente ?

ora aqui tens muito por onde escolher

http://www.themeflash.com/30-powerful-jquery-slideshow-sliders-plugins-and-tutorials/

jQuery Cycle Plugin - addSlide Demo 6

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information