5 plugins JQuery para slider de imagens

Slides de imagens são sempre bem-vindas em sites, então selecionei 5 plugins JQuery para slider de imagens , vamos lá então:

S3Slider

Este mostra imagens com efeito de fade-in, além de titulo e descrição da imagem.

Demo


Agile Carousel

 

Um slider bem completo, com botões de navegação e várias opções de configuração.

Demo



jQuery Cycle Plugin

 

Plugin com muitas opções de efeitos, como, zoom, fade, shuffle entre ourtos.

Demo


Nivo Slider

 

Plugin com efeitos de transição muito bacanas e ícones navegação.


Featured Content Slider

 

Slider usado muito em portais, esse plugin exibe além de transição de fade-in e título e descrição, a navegação por thumbnails(imagens miniatura)

Demo

WordPress + JQuery – Lista de categorias em Menu Accordion

Olá pessoal depois de muito tempo sem postar nada por aqui, trago uma dica bacana, irei mostrar como fazer um Menu Accordion simples com Jquery incorporado com a Template Tag wp_list_categories, vamos lá então.

Passo 1:

Baixe o Jquery, caso não o tenha ainda.

Passo 2:

Renomeie o arquivo baixado para jquery.js e coloque o arquivo na pasta do seu tema, apreoveite também e crie um arquivo chamado menuaccordion.js, que vamos utilizar mais pra frente.

Passo 3:

Abra o arquivo header.php e insira as seguintes linha dentro do

1
<head></head>
<head></head>

:

1
2
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/<strong>jquery.js</strong>"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/<strong><em>menuaccordion.js</em></strong>"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/<strong>jquery.js</strong>"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/<strong><em>menuaccordion.js</em></strong>"></script>

Onde

1
<?php bloginfo('template_directory');?>
<?php bloginfo('template_directory');?>

é o endereço dos diretórios do WordPress até chegar no seu tema([...]wp-content/themes[...]) e jquery.js e menuaccordion.js são os arquivos javascript que você baixou e criou respectivamente na pasta do seu tema.

Passo 4:

Agora vamos colocar o código para fazer o efeito accordeon dentro do arquivo menuaccordion.js:

1
2
3
4
5
6
7
8
$(document).ready(function(){
$('#accordion-container > li > a').bind('click',function() {
var $next = $(this).next();
if ($next.is(':visible')) return false;
$(this).parent().parent().find('li > ul:visible').slideUp('normal');
$next.slideDown('normal');
return false;
});});
$(document).ready(function(){
$('#accordion-container > li > a').bind('click',function() {
var $next = $(this).next();
if ($next.is(':visible')) return false;
$(this).parent().parent().find('li > ul:visible').slideUp('normal');
$next.slideDown('normal');
return false;
});});

Não esqueça de salvá-lo.

Passo 5:

Agora vamos fazer o CSS, abra o arquivo style.css e cole o seguinte código:

1
2
3
4
5
6
7
#menu-accordion ul {margin:0;padding:0;list-style:none;}
#menu-accordion ul#accordion-container {width:200px;padding:2px;}
#menu-accordion ul#accordion-container > li {margin-top:1px;background:#000;}
#menu-accordion ul#accordion-container > li > a {display:block;padding: 4px; color: #fff;text-decoration:none;outline:none;}
#menu-accordion ul#accordion-container > li > a:hover {background: #666;}ul.accordion-menu {display:none;background:#000;}
#menu-accordion ul.accordion-menu a {display:block;padding-left: 4px;background:#aaa;color:#555;text-decoration:none;outline:none;}
#menu-accordion ul.accordion-menu a:hover {color:#fff;}
#menu-accordion ul {margin:0;padding:0;list-style:none;}
#menu-accordion ul#accordion-container {width:200px;padding:2px;}
#menu-accordion ul#accordion-container > li {margin-top:1px;background:#000;}
#menu-accordion ul#accordion-container > li > a {display:block;padding: 4px; color: #fff;text-decoration:none;outline:none;}
#menu-accordion ul#accordion-container > li > a:hover {background: #666;}ul.accordion-menu {display:none;background:#000;}
#menu-accordion ul.accordion-menu a {display:block;padding-left: 4px;background:#aaa;color:#555;text-decoration:none;outline:none;}
#menu-accordion ul.accordion-menu a:hover {color:#fff;}

Não esqueça de salvá-lo.

Passo 6:

Agora a parte mais divertida, vamos manipular a Template Tag wp_list_categories é bem simples, escolha um aquivo para inserir o código abaixo(pode ser o header.php, ou até o sidebar.php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="menu-accordion"><span style="color:#339966;">/* div pai que engloba todo o menu*/</span>
 
<ul id="accordion-container"><span style="color:#339966;">/* essa parte é muito importante, essa "ul" ele engloba toda a formação do <em>accordion</em>*/</span>
 
<li><span style="color:#339966;">/*aqui começa a primeira opção do menu*/</span>
 
<a href="#">Opção 1</a><span style="color:#339966;">/* Link que expandirá quando clicado, para abrir as sub-opções, que nada mais é que as categorias que você definir*/</span>
 
<ul class="accordion-menu"><span style="color:#339966;">/*<em>class</em> responsável por englobar cada Opção do Menu*/</span>
 
<?php wp_list_categories('title_li=&include=48, 50'); ?><span style="color:#339966;">/* Aqui você definirá o ID das categorias que serão apresentadas nessa opção, os números 48, 50 são os ID desse exemplo, o </span><span style="color:#339966;">parâmetro</span><span style="color:#339966;"> <strong>"</strong></span><strong><em><span style="color:#339966;">title_li=</span></em></strong><span style="color:#339966;"><strong><em><span style="color:#339966;">"</span></em></strong> está vazia para que não apareça a palavra Categoria acimas das opções*/</span>
 
</ul>
 
</li><span style="color:#339966;">/*aqui termina a primeira opção do menu*/</span>
 
<li><span style="color:#339966;">/*aqui começa a segunda opção do menu*/</span>
 
<a href="#">Opção 2</a><span style="color:#339966;">/*Idem  da Opção 1*/</span>
 
<ul class="accordion-menu"><span style="color:#339966;">/*<em>class</em> responsável por englobar cada Opção do Menu*/</span>
 
<?php wp_list_categories('title_li=&include=49, 42'); ?><span style="color:#339966;">/* Aqui você definirá o ID das categorias que serão apresentadas nessa opção, agora eu coloquei os números 49, 42 , você pode definir quantas categorias quizer, igual a <strong>"Opção 1" </strong>o parâmetro <strong>"</strong></span><strong><em><span style="color:#339966;">title_li=</span></em></strong><span style="color:#339966;"><strong><em><span style="color:#339966;">"</span></em></strong> está vazia para que não apareça a palavra Categoria acima das opções*/</span>
 
</ul>
 
</li><span style="color:#339966;">/*aqui termina a segunda opção do menu*/</span>
 
</ul>
 
</div>
<div id="menu-accordion"><span style="color:#339966;">/* div pai que engloba todo o menu*/</span>

<ul id="accordion-container"><span style="color:#339966;">/* essa parte é muito importante, essa "ul" ele engloba toda a formação do <em>accordion</em>*/</span>

<li><span style="color:#339966;">/*aqui começa a primeira opção do menu*/</span>

<a href="#">Opção 1</a><span style="color:#339966;">/* Link que expandirá quando clicado, para abrir as sub-opções, que nada mais é que as categorias que você definir*/</span>

<ul class="accordion-menu"><span style="color:#339966;">/*<em>class</em> responsável por englobar cada Opção do Menu*/</span>

<?php wp_list_categories('title_li=&include=48, 50'); ?><span style="color:#339966;">/* Aqui você definirá o ID das categorias que serão apresentadas nessa opção, os números 48, 50 são os ID desse exemplo, o </span><span style="color:#339966;">parâmetro</span><span style="color:#339966;"> <strong>"</strong></span><strong><em><span style="color:#339966;">title_li=</span></em></strong><span style="color:#339966;"><strong><em><span style="color:#339966;">"</span></em></strong> está vazia para que não apareça a palavra Categoria acimas das opções*/</span>

</ul>

</li><span style="color:#339966;">/*aqui termina a primeira opção do menu*/</span>

<li><span style="color:#339966;">/*aqui começa a segunda opção do menu*/</span>

<a href="#">Opção 2</a><span style="color:#339966;">/*Idem  da Opção 1*/</span>

<ul class="accordion-menu"><span style="color:#339966;">/*<em>class</em> responsável por englobar cada Opção do Menu*/</span>

<?php wp_list_categories('title_li=&include=49, 42'); ?><span style="color:#339966;">/* Aqui você definirá o ID das categorias que serão apresentadas nessa opção, agora eu coloquei os números 49, 42 , você pode definir quantas categorias quizer, igual a <strong>"Opção 1" </strong>o parâmetro <strong>"</strong></span><strong><em><span style="color:#339966;">title_li=</span></em></strong><span style="color:#339966;"><strong><em><span style="color:#339966;">"</span></em></strong> está vazia para que não apareça a palavra Categoria acima das opções*/</span>

</ul>

</li><span style="color:#339966;">/*aqui termina a segunda opção do menu*/</span>

</ul>

</div>

E é isso ai pessoal está pronto nosso Menu Accordeon utilizando o WordPress, você também pode utilizar a Template Tag wp_list_pages no lugar wp_list_categories, para exibir as páginas do seu blog/site. Você também pode exibir quantas opções quizer basta repitir o mesmo procedimento.

Inté++ fui

Instalando o TinyMCE no seu site

Depois de muita procura na Internet, depois de muitos testes, eu finalmente achei um editor de texto em JavaScript que satisfazesse minhas necessidades, testei o FCKeditor, NicEdit(esse eu gostei muito, é bem leve e simples,pena que não “produza” código em (X)HTML ) e o TinyMCE, esse ultimo realmente superou as expectativas, ele é leve, bem completo, tem 2 opções de uso: o Simples e o Avançado, além de skins, integração fácil de se fazer e fácil de personalizar e o melhor, dentro dos padrões.

O TinyMCE transforma automaticamente qualquer textarea (obviamente os textareas que estão na página, cuja o script de integração esteja aplicado ) em um editor HTML Rich Text, segue abaixo então como fazer essa integração:

  • Baixe o pacote no site do TinyMCE
  • Descompacte na pasta onde está a página que deseja instalar o TinyMCE
  • Abra o arquivo desejado e entre as tag <head>…</head>, coloque uma dessas opções:

Modo Simples:

1
2
3
4
5
6
7
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
        theme : "simple"
    });
</script>
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "simple"
	});
</script>

Modo Avançado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
 
        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
 
        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",
 
        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",
 
        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });
</script>
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		// General options
		mode : "textareas",
		theme : "advanced",
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

		// Theme options
		theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true,

		// Example content CSS (should be your site CSS)
		content_css : "css/content.css",

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
		}
	});
</script>

Nota #1: Caso você ache alguns botões desnecessários basta exclui-los/desabilitá-los, nas seguintes linhas:

1
2
3
4
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",

Nota #2:Para mudar o posicionamento da bara de ferramenta no textarea, basta alterar as seguintes linhas:

1
2
3
4
theme_advanced_toolbar_location : "top", <strong>//poderá mudar para bottom</strong>
theme_advanced_toolbar_align : "left", <strong>//poderá mudar para right</strong>
theme_advanced_statusbar_location : "bottom",<strong>//poderá mudar para top</strong>
theme_advanced_resizing : true,
theme_advanced_toolbar_location : "top", <strong>//poderá mudar para bottom</strong>
theme_advanced_toolbar_align : "left", <strong>//poderá mudar para right</strong>
theme_advanced_statusbar_location : "bottom",<strong>//poderá mudar para top</strong>
theme_advanced_resizing : true,

Nota #3: Sobre a o pacote de tradução, sinceramente não consegui ainda faze-lá funcionar, então resolvi eu mesmo acessar a pasta: tinymce/jscripts/tiny_mce/themes/advanced/langs/ e editar os arquivos…um pouquinho de inglês técnico já basta!

Tradução

UPDATE: O Vinicius me avisou ali em baixo nos comentários, que enviou um pacote de tradução atualizado para o site oficial do TinyMCE, eu já testei e está funcionado muito bem. Então vamos ver como fazer a tradução:
1 - Faça o download do pacote em português – link http://tinymce.moxiecode.com/download_i18n.php – selecionando o checkbox(portuguese) e clicando no botão download no final da lista.

2- com o pacote extraido, copie as pastas para o diretório – \tinymce\jscripts\tiny_mce – e substitua os pacotes.

3- Feito os passos 1,2 corretamente adicione a seguinte linha(em vermelho):

1
2
3
4
5
[...]tinyMCE.init({
// General options
<span style="color: #ff0000;"> language : "pt", // adicione esta linha</span>
mode : "textareas",
theme : "advanced",[...]
[...]tinyMCE.init({
// General options
<span style="color: #ff0000;"> language : "pt", // adicione esta linha</span>
mode : "textareas",
theme : "advanced",[...]

Você pode adicionar esta linha tanto modo simples, quanto no avançado.

Pronto, agora é só se divertir!

[lomadeewpro category='3482' keywords='javascript']

<pre>&lt;script type=”text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”&gt;&lt;/script&gt;
&lt;script type=”text/javascript”&gt;
tinyMCE.init({
mode : “textareas”,
theme : “simple”
});
&lt;/script&gt;</pre>
<strong>Modo Avançado:</strong>
<pre>&lt;script type=”text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”&gt;&lt;/script&gt;
&lt;script type=”text/javascript”&gt;
tinyMCE.init({
// General options
mode : “textareas”,
theme : “advanced”,
plugins : “safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template”,

// Theme options
theme_advanced_buttons1 : “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect”,
theme_advanced_buttons2 : “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen”,
theme_advanced_buttons4 : “insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
content_css : “css/content.css”,

// Drop lists for link/image/media/template dialogs
template_external_list_url : “lists/template_list.js”,
external_link_list_url : “lists/link_list.js”,
external_image_list_url : “lists/image_list.js”,
media_external_list_url : “lists/media_list.js”,

// Replace values for the template plugin
template_replace_values : {
username : “Some User”,
staffid : “991234″
}
});
&lt;/script&gt;</pre>

Super Mario em 14kB, feito em Javascript


Que coisa maravilhosa essa! para aqueles que sáo fás do “encanador mais famoso do mundo dos games” e que ja teve contato com Javascript, irá se surpreender com esse jogo, por enquanto está na 1º fase, mas mesmo assim já da senti aquela vontade de jogar denovo(hehe) e também como o autor, ou autores,(que infelizmente náo descobrir os nomes ainda) “manjam” em Javascript. Além do Super Mario, Tem também projetos do Mario Kart, Chess(xadrez) e outras galerias(náo só de jogos) em javascript.

========================================
entre no site do desenvolvedor e veja mais
========================================

========================================
divirta-se com o Super Mário agora
========================================