Ir para conteúdo
  • 0

[Resolvido] Chamando Skript Slideshow

Cain

Perguntado por Cain,

 Compartilhar

Pergunta

Cain

Cain

Postado
Postado

To com uma duvida, estou com um script de slideshow, porem não sei chama-lo sem que bugue, quando consigo ele não mostra as imagens nem as legendas que estabeleci no script..

 

Eu tenho usado esse codigo no HTML:

	<div class="slideshow">
        <div class="wrap">
            <div class="slideshow-div">
                <div class="navslides">
                    <div class="navslides-prox">
                    	<a><i class="fa fa-fw">></i></a>                   
                    </div>
                    <div class="navslides-anter">
                    	<a><i class="fa fa-fw"><</i></a>                     
                    </div>
                </div>             
            </div>
Link para o comentário
Compartilhar em outros sites

20 respostass a esta questão

Posts Recomendados

Guest Dêemezeká

Guest Dêemezeká

Postado
Postado

Tipo eu to com um script js chamado Slideshow que me passaram num grupo que tava a algum tempo:

var infoimgs = ["title", "desc", "img"]

infoimgs["title"][0] = "Servidor Survival"
infoimgs["desc"][0] = "---"
infoimgs["img"][0] = "slide0.png"

infoimgs["title"][1] = "Servidor FillPVP"
infoimgs["desc"][1] = "---"
infoimgs["img"][1] = "slide1.png"

infoimgs["title"][2] = "SkyWars"
infoimgs["desc"][2] = "---"
infoimgs["img"][2] = "slide2.png"

infoimgs["title"][3] = "Servidor KitPvP"
infoimgs["desc"][3] = "---"
infoimgs["img"][3] = "slide3.png"

infoimgs["title"][4] = "Hunger Games"
infoimgs["desc"][4] = "---"
infoimgs["img"][4] = "slide4.png"

var totaldebanners = 2
var viewimg = 0

$(document).ready(function(){
	//--------//	
	
	var time;
	var hideNave 
	
	$('.navslides').css({
		"opacity": "0.0"	
	})

	$('.slideshow-div').mouseover(function(){
		$('.navslides').animate({
			"opacity": "1.0"
		}, 500)
		clearTimeout(hideNav)
	})	

	$('.slideshow-div').mouseleave(function(){
		var hideNav = setTimeout(function(){
			$('.navslides').animate({
				"opacity": "0.0"
			}, 500)
		}, 500)
	})

	hideText()
	showText(0) 

	$('.slideshow-div').css({
		"background": "url('img/banners/"+infoimgs["img"][0]+"')",
		"background-size": "cover"
	})

	resetTime(1)
	
	$('.navslides-prox').click(function(){

		viewimg = proxImage(viewimg+1)
		
	})	
	$('.navslides-anter').click(function(){
		if(viewimg >= 1)
		{
			viewimg = proxImage(viewimg-1)
		} 
	})	
})
function resetTime(imageAtual){
	time = setTimeout(function() {
		viewimg = proxImage(parseInt(imageAtual))
		
	}, 5000)
}
function proxImage(img)
{	
	if(img <= totaldebanners)
	{
		$('.slideshow-div').css({
			"background": "url('img/banners/"+infoimgs["img"][img]+"')",
			"background-size": "cover"
		})
		clearTimeout(time)
		resetTime(parseInt(img)+1)
		hideText()
		showText(parseInt(img))	
		return img
		
	} else {
		$('.slideshow-div').css({
			"background": "url('img/banners/"+infoimgs["img"][0]+"')",
			"background-size": "cover"
		})
		clearTimeout(time)
		resetTime(1)
		hideText()
		showText(0)
		return 0
	}
}
function hideText(){
	$('.slideshow-title').css({
		"width": "0px"
	})
	$('.slideshow-desc').css({
		"width": "0px"
	})
	$('.slideshow-title p').css({
		"opacity": "0.0"
	})
	$('.slideshow-desc p').css({
		"opacity": "0.0"
	})
}
function showText(img){
	$('.slideshow-title p').html(infoimgs["title"][img])
	$('.slideshow-desc p').html(infoimgs["desc"][img])
	
	$('.slideshow-title').animate({
		"width": "30%",
	})
	$('.slideshow-desc').animate({
		"width": "40%"
	})
	$('.slideshow-title p').animate({
		"opacity": "1.0"
	})
	$('.slideshow-desc p').animate({
		"opacity": "1.0"
	})
}

E o CSS to com o da bootstrap http://fonts.googleapis.com/css?family=Ubuntu

n entendi esse css, sao so fontes, n bootstrap

 

@topic

vc linkou a script no html?

Link para o comentário
Compartilhar em outros sites
Guest Rezendes

Guest Rezendes

Postado
Postado

Não tem como ajudar, não sei o seu código em CSS nem em Javascript, HTML não faz absolutamente nada, não tem como te ajudar, fecha esse tópico ai.

Link para o comentário
Compartilhar em outros sites
xHiroshi

xHiroshi

Postado
Postado

 

To com uma duvida, estou com um script de slideshow, porem não sei chama-lo sem que bugue, quando consigo ele não mostra as imagens nem as legendas que estabeleci no script..

 

Eu tenho usado esse codigo no HTML:

	<div class="slideshow">
        <div class="wrap">
            <div class="slideshow-div">
                <div class="navslides">
                    <div class="navslides-prox">
                    	<a><i class="fa fa-fw">></i></a>                   
                    </div>
                    <div class="navslides-anter">
                    	<a><i class="fa fa-fw"><</i></a>                     
                    </div>
                </div>             
            </div>

Posso fechar? :p

 

Não tem como ajudar, não sei o seu código em CSS nem em Javascript, HTML não faz absolutamente nada, não tem como te ajudar, fecha esse tópico ai.

Link para o comentário
Compartilhar em outros sites
Cain

Cain

Postado
  • Autor
Postado

Tipo eu to com um script js chamado Slideshow que me passaram num grupo que tava a algum tempo:

var infoimgs = ["title", "desc", "img"]

infoimgs["title"][0] = "Servidor Survival"
infoimgs["desc"][0] = "---"
infoimgs["img"][0] = "slide0.png"

infoimgs["title"][1] = "Servidor FillPVP"
infoimgs["desc"][1] = "---"
infoimgs["img"][1] = "slide1.png"

infoimgs["title"][2] = "SkyWars"
infoimgs["desc"][2] = "---"
infoimgs["img"][2] = "slide2.png"

infoimgs["title"][3] = "Servidor KitPvP"
infoimgs["desc"][3] = "---"
infoimgs["img"][3] = "slide3.png"

infoimgs["title"][4] = "Hunger Games"
infoimgs["desc"][4] = "---"
infoimgs["img"][4] = "slide4.png"

var totaldebanners = 2
var viewimg = 0

$(document).ready(function(){
	//--------//	
	
	var time;
	var hideNave 
	
	$('.navslides').css({
		"opacity": "0.0"	
	})

	$('.slideshow-div').mouseover(function(){
		$('.navslides').animate({
			"opacity": "1.0"
		}, 500)
		clearTimeout(hideNav)
	})	

	$('.slideshow-div').mouseleave(function(){
		var hideNav = setTimeout(function(){
			$('.navslides').animate({
				"opacity": "0.0"
			}, 500)
		}, 500)
	})

	hideText()
	showText(0) 

	$('.slideshow-div').css({
		"background": "url('img/banners/"+infoimgs["img"][0]+"')",
		"background-size": "cover"
	})

	resetTime(1)
	
	$('.navslides-prox').click(function(){

		viewimg = proxImage(viewimg+1)
		
	})	
	$('.navslides-anter').click(function(){
		if(viewimg >= 1)
		{
			viewimg = proxImage(viewimg-1)
		} 
	})	
})
function resetTime(imageAtual){
	time = setTimeout(function() {
		viewimg = proxImage(parseInt(imageAtual))
		
	}, 5000)
}
function proxImage(img)
{	
	if(img <= totaldebanners)
	{
		$('.slideshow-div').css({
			"background": "url('img/banners/"+infoimgs["img"][img]+"')",
			"background-size": "cover"
		})
		clearTimeout(time)
		resetTime(parseInt(img)+1)
		hideText()
		showText(parseInt(img))	
		return img
		
	} else {
		$('.slideshow-div').css({
			"background": "url('img/banners/"+infoimgs["img"][0]+"')",
			"background-size": "cover"
		})
		clearTimeout(time)
		resetTime(1)
		hideText()
		showText(0)
		return 0
	}
}
function hideText(){
	$('.slideshow-title').css({
		"width": "0px"
	})
	$('.slideshow-desc').css({
		"width": "0px"
	})
	$('.slideshow-title p').css({
		"opacity": "0.0"
	})
	$('.slideshow-desc p').css({
		"opacity": "0.0"
	})
}
function showText(img){
	$('.slideshow-title p').html(infoimgs["title"][img])
	$('.slideshow-desc p').html(infoimgs["desc"][img])
	
	$('.slideshow-title').animate({
		"width": "30%",
	})
	$('.slideshow-desc').animate({
		"width": "40%"
	})
	$('.slideshow-title p').animate({
		"opacity": "1.0"
	})
	$('.slideshow-desc p').animate({
		"opacity": "1.0"
	})
}

E o CSS to com o da bootstrap http://fonts.googleapis.com/css?family=Ubuntu

 

Qual plugin de slides vc ta usando?

Link para o comentário
Compartilhar em outros sites
Cain

Cain

Postado
  • Autor
Postado

n entendi esse css, sao so fontes, n bootstrap

 

@topic

vc linkou a script no html?

Eu errei... é que o antigo era bootstrap sem modificação, esse dai é um modificado...

 

Tipo eu nunca mexi com esse tipo de script, se puder me ensinar a linkar e pah..

Link para o comentário
Compartilhar em outros sites
Guest Dêemezeká

Guest Dêemezeká

Postado
Postado

Eu errei... é que o antigo era bootstrap sem modificação, esse dai é um modificado...

 

Tipo eu nunca mexi com esse tipo de script, se puder me ensinar a linkar e pah..

esse css n é bootstrap :p

 

vc linka assim

<script src="CAMINHO_DO_SCRIPT"></script>
Link para o comentário
Compartilhar em outros sites
Cain

Cain

Postado
  • Autor
Postado

hm nao sei como ajudar pq nao sei como funciona essa script

mas deve nao ta funcionando pq ta faltando um monte de ; nela

Vou ter que aprender como fazer essas scripts, ou achar outra .-. 

Link para o comentário
Compartilhar em outros sites
Guest Dêemezeká

Guest Dêemezeká

Postado
Postado (editado)

Bom, eu nunca mexi assim com script, então estou apanhando .-. 

 

http://prntscr.com/75b1ft

esse é o bxslider? se for vc precisa linkar o js e o css dele na <head>, e em qualquer lugar do <body> vc poe isso:

	<script type="text/javascript">
	$('.bxslider').bxSlider({
	  auto: true
	});
	</script>
Editado por Dêemezeká
Link para o comentário
Compartilhar em outros sites
Cain

Cain

Postado
  • Autor
Postado

 

esse é o bxslider? se for vc precisa linkar o js e o css dele na <head>, e em qualquer lugar do <body> vc poe isso:

	<script type="text/javascript">
	$('.bxslider').bxSlider({
	  auto: true
	});
	</script>

Bom vejo depois porque preciso sair x.x

Link para o comentário
Compartilhar em outros sites
Guest Dêemezeká

Guest Dêemezeká

Postado
Postado

<p style="text-align:center;"><img alt="logo-forum.png" src="http://www.gamersboard.com.br/logo-forum.png"/></p><br /></br><br /></br><br />Sua dúvida foi marcada como [Resolvido] e movido à área de dúvidas resolvidas.</br><br /></br><br /></br><br />Atenciosamente,</br><br />Gamer's Board</br>

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para lista de perguntas

  • Quem está navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...