Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

LokiSchw

[DOM] Swappable Slideshow

Por , em Javascript

Recommended Posts

LokiSchw    1

LokiSchw
Postado

Boa tarde Pessoal,

 

Sou novato aqui e necessito de ajuda urgente para um código de JS.

 

O que acontece:

Tenho um objeto que quando sobreposto com outro objeto, precise que crie um bullet (•) na mesma div desde objeto (Ou seja, preciso fazer algo parecido com "if (objetos > 1) { $(this).append("<br>•") e, após isso, seja possível trocar do primeiro para o segundo objeto clicando nele ou utilizando swap, afetando também os bullets (tirando e removendo as classes).

 

Tenho os seguintes códigos:

Ao largar o objeto onde quero =>

function drop(ev)	{
	ev.preventDefault();
	$("#project-description").remove();
	$("#project").val("");
	var data = ev.dataTransfer.getData("text\html");
	var element = $(document.getElementById(data));
	var target = $(ev.target).closest(".produto");
	var project;
	for (var i = 0; i < projects.length; i++)
		if (projects[i].value == data) 
			project = projects[i];
	if (project.video)	{
		$(target).append(project.video);
		element.remove();
	}
	else if (element[0].tagName == "IMG")	{
		if (!$(':first-child',target).hasClass('ativo'))	{
			target.empty();
			$("<div>").addClass("ativo").appendTo(target);
		}
		$(".ativo",target).prepend(element);
		AtivaSlide($("body"));
	}
}

O que tenho até agora para a sobreposição =>

function AtivaSlide(container) {
	if (container.ativos)
		for (var i = 0; i < container.ativos.length; i++)
			clearInterval(container.ativos[i]);
	container.ativos = [];
	$(".ativo", container).each(function()	{
		var $this = $(this);
		if ($this.children().length > 1)	{
			$("img:gt(0)", $this).hide();
            onclick(function() {
				$(':first-child', $this)
					.hide()
					.next("img")
					.end()
					.appendTo($this);
            });
		}
	});
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

LokiSchw    1

LokiSchw
Postado

Olá, Loki.

 

Manda o HTML, para gente dar uma olhada?

 

[]'s

Marco Bruno.

 

Marco,

 

Segue abaixo:

	<body>
		<div class="cabecalho">
			<div class="logo">
				<img src="img/logo247.gif" title="24\7 Inteligência Digital" />
			</div>
				<h1>RETAIL ONLINE</h1><p> </p><p> </p>
		</div>
		<div class="corpo">
		<div class="pagina">
			<div class="topotabela">
				<div class="textotopo"> COBRIMOS QUALQUER OFERTA NA BOCA DO CAIXA! </div>
			</div>
			<div class="restotabela">
				<table id="conteudoCen">
					<tr class="tabelalinha">
						<td class="produto" ondrop="drop(event)" ondragover="allowDrop(event)">
						 
						</td>
						<td class="produto" ondrop="drop(event)" ondragover="allowDrop(event)">
						 
						</td>
						<td class="produto" ondrop="drop(event)" ondragover="allowDrop(event)">
						 
						</td>
					</tr>
					<tr class="tabelalinha">
						<td class="produto" ondrop="drop(event)" ondragover="allowDrop(event)">
						 
						</td>
						<td class="produto" ondrop="drop(event)" ondragover="allowDrop(event)">
						 
						</td>
						<td class="produto" ondrop="drop(event)" ondragover="allowDrop(event)">
						 
						</td>
					</tr>
					<tr class="tabelalinha">
						<td class="produto" ondrop="drop(event)" ondragover="allowDrop(event)">
						 
						</td>
						<td class="produto" ondrop="drop(event)" ondragover="allowDrop(event)">
						 
						</td>
						<td class="produto" ondrop="drop(event)" ondragover="allowDrop(event)">
						 
						</td>
					</tr>
					<tr class="tabelalinha">
						<td colspan="3">
							<table id="conteudoCen2">
								<tr class="tabelalinha">
									<td id="destaque" class="produto"  ondrop="drop(event)" ondragover="allowDrop(event)">
									 
									</td>
									<td class="produto" ondrop="drop(event)" ondragover="allowDrop(event)">
									 
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div>
		</div>
			<div ondrop="drop(event)" ondragover="allowDrop(event)" class="img_slides_wrap slides_wrap wrap">
			</div>
			<div class="produtos">
				<div class="caixa"><h2> SELEÇÃO DE OFERTAS </h2>
				    <div style="text" id="project-label">
						NOME DO PRODUTO: <input id="project" onfocus="limpaClick(event)"/>
					<p id="project-description"></p>
					        <div id="project-icon"></div>
        <input type="hidden" id="project-id">
  <div class="caixaitem"><form method="post" action="" onsubmit="$('#val1').val($('#content').html());$('#val2').val($('#styleContent').text())">
		<input type="hidden" name="val1" id="val1">
        <input type="hidden" name="val2" id="val2">
        <input type="submit" id="btnSave" value="GERAR TEMPLATE" name="botao"/></div>
        </form>
					</div><div class="lixeira" ondragover="allowDrop(event)" ondrop="exclui(event)"><img src="img/lixeira.png" /></div>
				</div>
			</div>
		</div>
	</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Olá, Loki.

 

Você tem uma representação visual desse slideshow? Pois seu código esta muito complicado.

Se você tiver um exemplo visual(tela) vai ajudar bastante.

 

[]'s

Marco Bruno.

Compartilhar este post

Link para o post
Compartilhar em outros sites

LokiSchw    1

LokiSchw
Postado

Marco,

 

Não tenho uma representação visual. Posso tentar ser mais claro:

 

-É colocada a imagem;

 

-Se colocada outra imagem na mesma linha/coluna que a primeira, é criado abaixo dessa imagem um bullet com a quantidade de imagens. (Ex: Duas imagens são sobrepostas, sendo assim, são criados 2 "•" logo abaixo delas;

 

-O Primeiro "•" fica em negrito e o segundo esbranquiçado (Ativo e Inativo);

 

-Ao clicar na imagem, é realizado um fadeout na primeira e um fadeIn na segunda, alterando qual "•" está ativo.

 

Consegui explicar?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito