Arquivo

Arquivo da Categoria ‘xml’

Inserindo imagem em rotação com JW Image Rotator

21, setembro, 2011 2 comentários

Estreiando a categoria Tutorial, vou mostrar como inserir imagem em rotação com JW Image Rotator.

Em princípio, para atender uma “urgência” do nosso amigo Fábio Higor faremos os uploads e confecção do arquivo .xml manualmente.

  1. Primeiro vamos baixar o JW Image Rotator no link: http://www.longtailvideo.com/players/jw-image-rotator
  2. Depois, descompacte o arquivo imagerotator.zip em seu localhost. Dentro deste diretório você encontrará os seguintes arquivos:

    3. imagerotator.html,
    imagerotator.pdf,
    imagerotator.swf,
    madrid.xml,
    madrid1.jpg,
    madrid2.jpg,
    madrid3.jpg,
    swfobject.js.

  3. Organize/renomeie os arquivos conforme suas necessidades. Neste tutorial mantive a seguinte estrutura:

    banner.xml,
    banner01.jpg,
    banner02.jpg,
    banner03.jpg,
    imagerotator.swf,
    index.html,
    swfobject.js

  4. Edite o arquivo banner.xml como segue: 
    <?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
	<trackList>
 
		<track>
			<title>Título da Imagem 01</title>
			<creator>edson_indio</creator>
			<location>banner01.jpg</location>
			<info>http://www.indio.eti.br</info>
		</track>
 
		<track>
			<title>Título da Imagem 02</title>
			<creator>edson_indio</creator>
			<location>banner02.jpg</location>
			<info>http://www.indio.eti.br</info>
		</track>
 
		<track>
			<title>Título da Imagem 03</title>
			<creator>edson_indio</creator>
			<location>banner03.jpg</location>
			<info>http://www.indio.eti.br</info>
		</track>
 
	</trackList>
</playlist>
  5. Edite o arquivo index.html como segue: 
    <html>
<head>
 
	<title>JW Image Rotator</title>
 
	<style type="text/css">
		body { background-color: #fff; padding: 0 0px; color:#000; font: 13px/18px Arial, sans-serif; margin:0 0 0 0; }
		a { color: #360; }
		h3 { padding-top: 50px; }
		ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; }
	</style>
</head>
<body>
<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
	var s1 = new SWFObject("imagerotator.swf","rotator","605","200","7");
	s1.addParam("allowfullscreen","true");
	s1.addVariable("file","banner.xml");
	s1.addVariable("width","605");
	s1.addVariable("height","200");
	s1.write("container");
	</script>
</body>
</html>
  6. Você pode inserir o código do item 5 direto no seu arquivo. Ou, como eu fiz neste tutorial, inserir via iframe assim:

    <iframe src="http://www.indio.eti.br/imagerotator" width="650" height="200"></iframe>

Por enquanto é isso. O próximo tutorial, vamos inserir os dados no .xml e “upar” os arquivos via PHP.

Categories: html, Tutorial, xml Tags: , ,