All for Joomla All for Webmasters

Códigos do Slide show

Vídeo-aula em meu canal do youtube!

Código para colocar no CSS:

.window {
	height:450px;	width: 645px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
-moz-box-shadow: 0 0 5px #757575;

-webkit-box-shadow: 0 0 5px #757575;

box-shadow: 0 0 5px #757575;
.image_reel {
	position: absolute;
	top: 0; left: 0;
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
        font-color: #ffffff;
	line-height: 40px;
	background: url('FUNDO DA PLAQUINHA DOS NUMEROS.png') no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #ffffff;
        font-color: #ffffff;
.paging {
	font-weight: bold;
	background: #b90000;
	border: 1px solid #ffffff;
        font-color: #ffffff;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
.paging a:hover {font-weight: bold; font-color: #ffffff;}

Código para colocar depois da tag </body>:

<script type="text/javascript">

$('#slideshowHolder').jqFancyTransitions({ width: 645, height: 450 });


<script type="text/javascript">
gradualFader.init() //activate gradual fader

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); = id;
  js.src = "//";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Código para colocar aonde quiser que apareça o slide:

<div class="container">
<div class="main_view">
    <div class="window">
        <div class="image_reel">
<a href=""><img src="http://imagem.png" alt="" /></a>

<a href=""><img src="http://imagem.png" alt="" /></a>

<a href=""><img src="http://imagem.png" alt="" /></a>

<a href=""><img src="http://imagem.png" alt="" /></a>

<a href=""><img src="http://imagem.png" alt="" /></a>

 <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
        <a href="#" rel="5">5</a>
    </div>   </div>


<script type="text/javascript">
$(document).ready(function() {
	//Code goes here

//Show the paging and activate its first link
$(".paging a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
        left: -image_reelPosition


//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
        $active = $('.paging').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        rotate(); //Trigger the paging and slider function
    }, 3000); //Timer speed in milliseconds (3 seconds)

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer

//On Click
$(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor