Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
fspjonny

JQuery RESOLVIDO Modificar uso do plugin Vegas Background.

Recommended Posts

Bom dia!

 

Eu estou usando um plugin para fazer o background de um site(Vegas Background by Jay Salvat), facílimo de usar, porém eu preciso que as imagens de fundo sejam lidas conforme forem adicionadas ao diretório onde ficam os backgrounds no servidor.

Na documentação do plugin é assim que se procede:

$elmt.vegas({
    delay: 7000,
    timer: false,
    shuffle: true,
    firstTransition: 'fade',
    firstTransitionDuration: 5000,
    transition: 'slideDown2',
    transitionDuration: 2000,
    slides: [              /* Perceba que a opção slides: é um vetor e o caminho para as imagens de fundo são colocadas manualmente */
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' },
        { src: '/img/slide4.jpg' }
    ]
});

/* Preciso modificar isso, mas não sei se o Javascript ou JQuery, tem a capacidade de ler e listar o conteúdo 
de uma pasta remota e listar o seu conteúdo e passar como um parâmetro para a opção slides, o que tornaria
o processo dinâmico */

Veja a Documentação do plugin no site do criador

Editado por fspjonny
erro de grafia

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fspjonny Olá,

Fica bem inviável modificar o plugin para aceitar um loop de $.each() ali no slides.

Para contornar seu problema, você pode utilizar o PHP e criar um array de imagens a partir da consulta ao banco de dados e transformar em um objeto JSON.

 

No jQuery basta imprimir!

 

Exemplo:

 

$arr = array(
    array("src" => "img/slide1.jpg"),
    array("src" => "img/slide2.jpg"),
    array("src" => "img/slide3.jpg"),
    array("src" => "img/slide4.jpg")
);

$imgJSON = json_encode($arr);

Neste exemplo, eu criei um array. Mas no seu caso, você pode criar este array fazendo uma consulta ao banco de dados.

PS: para funcionar, é necessário que crie um array multi-dimensional porque temos que usar o atributo src como índice. Se não fizer assim, o valor do índice é sempre substituído pelo último inserido.

Portanto, usei o array multi dimensional.

 

Agora no jQuery você chama assim:

 

$(document).ready(function(){
		var bg = $("body");
	
		bg.vegas({
		    delay: 7000,
		    timer: false,
		    shuffle: true,
		    firstTransition: 'fade',
		    firstTransitionDuration: 5000,
		    transition: 'slideDown2',
		    transitionDuration: 2000,
		    slides: <?php echo $imgJSON;?>
		});		
	});

Note que a sua linha slides: é feita de forma manual:

slides: [             
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' },
        { src: '/img/slide4.jpg' }
    ]

No caso, esta estrutura é de um json. Para gerar  essa estrutura, usamos o array criado no php e transformado nesta estrutura json.

 

Então Se você der um echo na variável $imgJSON  lá no php vai retornar:

[
 {"src":"img\/slide1.jpg"},
 {"src":"img\/slide2.jpg"},
 {"src":"img\/slide3.jpg"},
 {"src":"img\/slide4.jpg"}
]

E como esta variável $imgJSON retorna esta estrutura em JSON, basta usar um echo nesta variável php.

Então com isso tudo, sempre que inserir uma imagem nova, faz um update na tabela onde contem o nome da imagem e gera novamente o json com a nova imagem. Aí se preferir colocar como primeiro, a última imagem inserida, você cria o array reverso! :thumbsup:

 

Editado por DiF

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia!

 

Não há uma tabela com esse propósito de armazenar  o caminho das imagens, senão seria bem viável mesmo usar PHP e ir imprimindo cada linha com uso do while, porém a sua ideia do array é bem possível mesmo e pensei em obter a lista de arquivos da pasta com o dir(), assim:

 

<?php

$caminho = "img/backgrounds/";

$diretorio = dir($caminho);

while($arquivo = $diretorio -> read()){
echo $caminho.$arquivo;
}
$diretorio -> close();

?>

A pasta que contém os arquivos de imagens para o background, não precisam estar ordenadas, elas só precisam ser lidas, até porque o plugin Vegas executa as imagens de forma aleatória(shuffle), para evitar repetições.

 

Vou implementar aqui a sua ideia e volto para dar resposta do resultado!

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá DiF!

 

Obrigado pela luz no túnel!

 

Não sei o que deu errado com JSON, ele simplesmente não foi entendido e sempre passava só um caminho de imagem, de forma aleatória!

Foi gerado corretamente no PHP  json_encode();

A saída foi verificada com var_dump(), que mostrou uma estrutura JSON correta, idêntica a sua acima, no entanto o plugin não acatou e transitou só uma imagem e parou ela na tela.

 

Então decidi criar pelo PHP uma função em que ela fosse chamada pelo plugin carregando o JSON e o mesmo ocorreu!, Uma imagem e para!

 

Mudei todo o meio de campo e ainda dentro de uma função fiz o código abaixo:

<?php
function slide(){
	$caminho = "img/backgrounds/";
	$diretorio = array_slice(scandir($caminho),2);

	for($i=0; $i < sizeof($diretorio); $i++){
//imitei uma saída JSON
	$imagem = "{src: '".$caminho.$diretorio[$i]."'},";
	echo $imagem;
	}
  
  ?>

Então conferi a saída que foi igualzinha a do JSON, só que linha por linha até sair do laço.

 

No código do plugin Vegas na opção slides, chamei a função em PHP slide().

$('body').vegas({
				timer: false,
				slides: [<?php slide(); ?>],
				animation: 'random'
				});

Não sei te explicar técnicamente o por quê disso mas, está funcionando perfeitamente o plugin.

As imagens voltaram a circular e de forma aleatória da mesma forma como se eu tivesse escrito cada imagem de forma manual no código.

 

Não sei o que fiz ou deixei de fazer no JSON, mas funcionou sem JSON!

 

Muito obrigado como sempre pela atenção e ajuda!

Editado por fspjonny
erro de grafia
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×