Crea slideshow de imagenes para pagina facebook

los slideshow sirven para crear presentaciones mas estéticas con imágenes, 6 en este caso pero puedes agregarle cuantas desees

Para colocar el slideshow debes agregar la aplicación FBML a tu pagina facebook, una vez hecho esto deberás copiar y pegar el código en la aplicación. 

este es el primer slideshow de imágenes que les muestro 

CODIGO:

<div style="background:url(http://img50.xooimage.com/files/9/3/e/bigpreviewbackground-22d06b5.png) no-repeat left top; width:478px; height:299px; margin:0 0 0 21px;">

<div style="margin:239px 0 0 9px; position:absolute;"><img src="images/bigPreviewTop.png" alt="" /></div>

<div id="photo00" style="padding:9px 0 0 9px;"><img width="460" height="281" id="currentImg" src="http://img53.xooimage.com/files/2/c/1/trucos1-22c0c7c.png" /></div>

<div id="photo01" style="display:none; padding:9px 0 0 9px;"><img width="460" height="281"src="http://img51.xooimage.com/files/2/c/5/trucos2-22c0c8a.png" /></div>

<div id="photo02" style="display:none; padding:9px 0 0 9px;"><img width="460" height="281" src="http://img50.xooimage.com/files/d/0/7/trucos3-22c0c92.png" /></div>

<div id="photo03" style="display:none; padding:9px 0 0 9px;"><img width="460" height="281" src="http://img52.xooimage.com/files/8/d/d/trucos4-22c0c9a.png" /></div>

<div id="photo04" style="display:none; padding:9px 0 0 9px;"><img width="460" height="281" src="http://img51.xooimage.com/files/0/9/d/trucos5-22c0cb5.png" /></div>

<div id="photo05" style="display:none; padding:9px 0 0 9px;"><img width="460" height="281" src="http://img54.xooimage.com/files/7/d/f/trucos6-22c0cbc.png" /></div>

</div>

<div style="padding:10px 0 0 18px;">

<ul style="margin:0; padding:0;">

<li style="list-style:none; display:inline; float:left; padding:0 1px;"><a href="#" clicktoshow="photo00" clicktohide="photo01,photo02,photo03,photo04,photo05"><img width="78" height="78" src="http://img53.xooimage.com/files/2/c/1/trucos1-22c0c7c.png" border="0" alt="thumb 01" /></a></li>

<li style="list-style:none; display:inline; float:left; padding:0 1px;"><a href="#" clicktoshow="photo01" clicktohide="photo00,photo02,photo03,photo04,photo05"><img width="78" height="78" src="http://img51.xooimage.com/files/2/c/5/trucos2-22c0c8a.png" border="0" alt="thumb 02" /></a></li>

<li style="list-style:none; display:inline; float:left; padding:0 1px;"><a href="#" clicktoshow="photo02" clicktohide="photo01,photo00,photo03,photo04,photo05"><img width="78" height="78" src="http://img50.xooimage.com/files/d/0/7/trucos3-22c0c92.png" border="0" alt="thumb 03" /></a></li>

<li style="list-style:none; display:inline; float:left; padding:0 1px;"><a href="#" clicktoshow="photo03" clicktohide="photo01,photo02,photo00,photo04,photo05"><img width="78" height="78" src="http://img52.xooimage.com/files/8/d/d/trucos4-22c0c9a.png" border="0" alt="thumb 04" /></a></li>

<li style="list-style:none; display:inline; float:left; padding:0 1px;"><a href="#" clicktoshow="photo04" clicktohide="photo01,photo02,photo03,photo00,photo05"><img width="78" height="78" src="http://img51.xooimage.com/files/0/9/d/trucos5-22c0cb5.png" border="0" alt="thumb 05" /></a></li>

<li style="list-style:none; display:inline; float:left; padding:0 1px;"><a href="#" clicktoshow="photo05" clicktohide="photo01,photo02,photo03,photo04,photo00"><img width="78" height="78" src="http://img54.xooimage.com/files/7/d/f/trucos6-22c0cbc.png" border="0" alt="thumb 06" /></a></li>

</ul>

</div>

<div style="font-size:10px; text-align:center; padding:10px 0;">Copyright &copy; NOMBRE DE TU PAGINA FACEBOOK | Redesign by <a href="http://cosasparaelface.blogspot.com" title="Trucos Facebook" style="color:#a19b8e;">Trucos Facebook</a></div>

Debes editar lo que esta en otro color. la primera lista de imágenes (.png) es la misma que la segunda

ejemplo: http://www.facebook.com/trucosfb?v=app_4949752878 

Este es otro slideshow creado por webdigi :

CODIGO:

<link href="http://www.webdigi.co.uk/css/fb.css" rel="stylesheet" type="text/css" />

<style type="text/css">

#slideshow_inner a { opacity:0.7; margin: 0 7px; }

#slideshow_inner a:hover { opacity: 1; }

</style>

<div id="slideshow_wrapper" style="width:550px; clear: both; margin-bottom: 20px">

<img id="left_button" src="http://www.webdigi.co.uk/images/facebook/thumbs/prev.png" onclick="goleft(); return false;" style="float: left; display: block; width: 41px; cursor: pointer; opacity: 0.3;" />

<div id="slideshow" style="overflow: hidden; width: 435px; float: left; position:relative; margin-right: 5px">

<div id="slideshow_inner" style="position: relative; width: 1450px">

<a id="slide1" href="http://webdigi.co.uk/portfolio.php#images/portfolio/bnc.jpg" title="Badenoch & Clark Recruitment"><img width=200 height=200 src="http://www.webdigi.co.uk/images/facebook/thumbs/bnc.jpg" onmouseover="portfolioshow('bnc')" /></a>

<a id="slide2" href="http://webdigi.co.uk/portfolio.php#images/portfolio/dwc.jpg" title="DWC Trade Windows"><img width=200 height=200 src="http://www.webdigi.co.uk/images/facebook/thumbs/dwc.jpg" onmouseover="portfolioshow('dwc')" /></a>

<a id="slide3" href="http://webdigi.co.uk/portfolio.php#images/portfolio/otgc.jpg" title="OTGC"><img width=200 height=200 src="http://www.webdigi.co.uk/images/facebook/thumbs/otgc.jpg" onmouseover="portfolioshow('otgc')" /></a>

<a id="slide4" href="http://webdigi.co.uk/portfolio.php#images/portfolio/tellmewi.jpg" title="Home Security"><img width=200 height=200 src="http://www.webdigi.co.uk/images/facebook/thumbs/tellmewi.jpg" onmouseover="portfolioshow('tellmewi')" /></a>

<a id="slide5" href="http://webdigi.co.uk/portfolio.php#images/portfolio/ultimateskills.jpg" title="Ultimate Skills Video"><img width=200 height=200 src="http://www.webdigi.co.uk/images/facebook/thumbs/ultimateskills.jpg" onmouseover="portfolioshow('ultimateskills')" /></a>

<a id="slide6" href="http://webdigi.co.uk/portfolio.php#images/portfolio/wilsonstaff.jpg" title="Information Kiosk"><img width=200 height=200 src="http://www.webdigi.co.uk/images/facebook/thumbs/wilsonstaff.jpg" onmouseover="portfolioshow('wilsonstaff')" /></a>

</div>

</div>

<img id="right_button" src="http://www.webdigi.co.uk/images/facebook/thumbs/next.png" onclick="goright(); return false;" style="float: left; display: block; width: 41px; cursor: pointer;" />

</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div id="projectdetails">

<div id="default">

<h3>Usage</h3>

<p>The details of a project are shown when you move over the thumbnails</p>

<p>To see details of the project, please click on the image thumbnail</p>

<p>*Note that facebook security requires users to click first to enable javascript</p>

</div>

<div id="bnc" style="display:none">

<h3>Badenoch & Clark</h3><p>Badenoch & Clark was established in 1980 and is a subsidiary of the Fortune 1000 company MPS Group. Badenoch & Clark is an award winning, international recruitment consultancy with offices in several major cities in England and Scotland. It employs around 350 consultants who provide employment, recruitment and retention consultancy to organisations across England, Scotland and Wales. It's clients range from major multinationals to medium-sized enterprises; from central government and the NHS to housing associations and not-for-profit organisations. Badenoch & Clark specialises in placing professionals into temporary, interim and permanent positions in accounting, finance, banking, financial services, IT, human resources, marketing, procurement, change management, law and the Public Sector.</p><p>They wanted to move away from their existing ASP website and improve their websites in terms of SEO, Content Management, Job management and reporting. We have helped to develop their new website in CakePHP with complete content management and excellent SEO improvements. The search function for jobs incorporates an advanced tree searching to find relevant jobs in the locations mentioned by the job seekers. Also the new the improved site can search through several thousands of jobs in the database and allows the candidates to select multiple jobs and add them to their basket and apply. We have also built the management information system which shows senior management detailed statics of various trends throughout the site.</p><h3>Technologies used</h3><p>PHP, CakePHP, MySQL, AJAX, HTML, CSS, jQuery, Scriptaculous, Content Management System.</p>

</div>

<div id="dwc" style="display:none">

<h3>DWC Trade Windows</h3><p>DWC Trade Windows Ltd is a family owned business and has been successfully trading for 25 years.</p><p>DWC as part of their goal to make buying replacement Windows and Doors easy and stress-free, they wanted to launch an innovative Real Window Quoter. A fully interactive online system that lets users build accurately priced quotes in minutes, without the need for a salesman. </p><p>We have helped DWC build the worlds first online window quoter. Customers can completely customise a window including handles, extenders, cills, vents, frame, glass and finish. The offering is extended to Bay windows, French Quoter, Patio Door Quoter. Once a customer is happy with the customised window / door they can proceed to checkout and complete the purchase. All the orders and quotes flow into the administrator panel and they can see the requirements and fulfil these orders. The administrator adds prices of each individual component to the admin panel and these are used to calculate the final pricing.</p><h3>Technologies used</h3><p>PHP, MySQL, AJAX, HTML, CSS, Protx</p>

</div>

<div id="otgc" style="display:none">

<h3>OTG Communications</h3><p>OTG Communications is a mobile applications development company and we helped them to build the web application part of beeceen </p><p>Beeceen software is a communication platform that uses location based technologies to put users in touch with their area. Unlike web applications some of which have been simply transferred to mobile, being a truly mobile application beeceen offers a unique user experience.</p><ul><li>Track friends and other members of your community on your mobile.</li><li>Post text messages and pictures of your location on a map for others to see.</li><li>Be the first to hear about local news and events taking place near you</li><li>Find out about limited time special product and service offerings at your current location</li><li>Get directions to wherever you need to go and reach your destination fast</li></ul><p>The web application sits on a dedicated server we have setup for OTG communications and it is capable of handling GPS updates from several handsets via GPRS / 3G. Our performance benchmarks show that over 10,000 requests / second were processed by our application to handle the GPS updates. The server also handles messages between friends and also directions to be processed by the server. We have also built a WAP version of the website to be accessible from mobile phones.</p><h3>Technologies used</h3><p>PHP, MySQL (With Replication & Cluster), AJAX, HTML, CSS, jQuery, WAP</p>

</div>

<div id="tellmewi" style="display:none">

<h3>Homecare systems</h3><p>Homecare systems are a leader in innovative wireless home automation system. We helped them build the web application part for TellMeWi</p><p>TellMeWi is a complete wireless and web connected home automation and security management system. The core component of the system is the Home HUB, which contains the processing capability to manage a large number of wireless connected alarm and control devices. These include lighting, thermostats, shutters control and all devices and functions to fully manage home security. These wireless devices can be located up to 150 m indoors and up to an astounding 700 m outdoors. The coverage can be further extended by using the sophisticated and highly secure wireless mesh network </p><p>Our web application provides a portal for these hub owners control devices in their homes from anywhere in the world. We have also built an SMS gateway to allow hub users to also send SMS which will be processed and appropriate command will be sent to the hub in their house in seconds. We have also built a content management system which allows the visitors to their website to view the site in 14 languages and the site is also launched in 15 countries.</p><h3>Technologies used</h3><p> PHP, Zend Framework, MySQL (With Replication & Cluster), AJAX, HTML, CSS, jQuery, SMS gateway, Payment gateways, Content Management System.</p>

</div>

<div id="ultimateskills" style="display:none">

<h3>UltimateSkills</h3><p>UltimateSkills is a Youtube like video sharing site built by us in PHP. It supports all the standard features like uploading videos in all popular formats like MPG, MPEG, VIVO, DCD, VCD, ASF, WMV, Quicktime. Features include social networking, user profile, create channels and groups, cloud tags, polls. The site is also built to work with multiple languages. Registered users can upload video and share with friends or open to rest of the world.</p><h3>Technologies used</h3><p>PHP, Smarty, MySQL, FLV Player, Flash Video, HTML, CSS

.</p>

</div>

<div id="wilsonstaff" style="display:none">

<h3&gt;Wilson</h3><p>Wilson is the world's leading manufacturer of ball sports equipment. Their core sports are tennis, baseball, American football, golf, basketball, softball, badminton and squash. The Wilson business is structured into three business areas: Racquet Sports, Team Sports and Golf.</p><p>We have built a Kiosk application for a promotion of the new range of Wilson golf staff. The Kiosk project is built to run on windows based touch screen kiosk running apache webserver. The application allows users to enter take part in a quick quiz and if they have answered the questions correctly they will be entered into a prize draw. Also includes additional features like spot prizes for every 50th user. The application also allows the administrator to upload data from several Kiosks to a central database server at the end of the campaign / promotion. </p><h3>Technologies used </h3><p>PHP, MySQL, AJAX, HTML, CSS, Opera, Kiosk.</p>

</div>

</div>



<script>

//Script for slideshow

var numslides = 6;

var slidesvisible = 2;

var currentslide = 0;

var slidewidth = 220;

function goright() {

if (currentslide <= (numslides-slidesvisible-1)) {

Animation(document.getElementById('slideshow_inner')).by('right', slidewidth+'px').by('left', '-'+slidewidth+'px').go();

if (currentslide == (numslides-slidesvisible-1)) {

Animation(document.getElementById('right_button')).to('opacity', '0.3').go();

Animation(document.getElementById('left_button')).to('opacity', '1').go();

}

if (currentslide < (numslides-slidesvisible-1)) { Animation(document.getElementById('left_button')).to('opacity', '1').go(); }

currentslide++;

}

}

function goleft() {

if (currentslide > 0) {

Animation(document.getElementById('slideshow_inner')).by('left', slidewidth+'px').by('right', '-'+slidewidth+'px').go();

if (currentslide == 1) {

Animation(document.getElementById('left_button')).to('opacity', '0.3').go();

Animation(document.getElementById('right_button')).to('opacity', '1').go();

}

if (currentslide > 1) { Animation(document.getElementById('right_button')).to('opacity', '1').go(); }

currentslide--;

}

}

</script>

<script>

//This area contains script for project details

function portfolioshow(project)

{

//document.getElementById("projectdetails").



var p = document.getElementById("projectdetails").getChildNodes();

for(var a = 0;a < p.length;a++) {

if(p[a].getTagName().toLowerCase() == 'div') {

p[a].setStyle("display","none");

}

}

document.getElementById(project).setStyle("display","block");

}

</script>

Lo que esta en otro color es para editar, lo que esta en verde es el link a donde nos llevara al hacer clic en la correspondiente imagen


ejemplo: http://www.facebook.com/trucosfb?v=app_11007063052


slideshow vertical:

<div style="float:left;

padding-left:10px;">

<div id="photo00"><img id="currentImg" src="http://img54.xooimage.com/files/d/6/f/trucosfacebookazul-22aebec.png" /></div>

<div id="photo01" style="display:none;"><img width="329" height="488" src="http://img54.xooimage.com/files/8/e/7/trucosfacebookamarillo-22aebf7.png" /></div>

<div id="photo02" style="display:none;"><img width="329" height="488" src="http://img53.xooimage.com/files/7/3/8/trucosfacebookverde-22aec25.png" /></div>

<div id="photo03" style="display:none;"><img width="329" height="488" src="http://img53.xooimage.com/files/8/c/8/trucosfacebookrojo-22aec18.png" /></div>

<div id="photo04" style="display:none;"><img width="329" height="488" src="http://img51.xooimage.com/files/6/f/c/trucosfacebookrosa-22aec1e.png" /></div>

<div id="photo05" style="display:none;"><img width="329" height="488" src="http://img51.xooimage.com/files/3/3/b/trucosfacebookceleste-22aec01.png" /></div>

<div id="photo06" style="display:none;"><img width="329" height="488" src="http://img53.xooimage.com/files/2/c/1/trucosfacebooknegro-22aec10.png" /></div>

</div>

<div style="margin:0 0 0 365px;

padding:0;">

<ul>

<li><a href="#" clicktoshow="photo00" clicktohide="photo01,photo02,photo03,photo04,photo05,photo06"><img width="140" height="68" src="http://img52.xooimage.com/files/a/7/b/trucosfacebookazul2-22aec2d.png" /></a></li>

<li><a href="#" clicktoshow="photo01" clicktohide="photo00,photo02,photo03,photo04,photo05,photo06"><img width="140" height="68" src="http://img51.xooimage.com/files/1/a/b/trucosfacebookamarillo2-22aec35.png" /></a></li>

<li><a href="#" clicktoshow="photo02" clicktohide="photo01,photo00,photo03,photo04,photo05,photo06"><img width="140" height="68" src="http://img52.xooimage.com/files/9/8/8/trucosfacebookverde2-22aec5e.png" /></a></li>

<li><a href="#" clicktoshow="photo03" clicktohide="photo01,photo02,photo00,photo04,photo05,photo06"><img width="140" height="68" src="http://img52.xooimage.com/files/f/a/3/trucosfacebookrojo2-22aec49.png" /></a></li>

<li><a href="#" clicktoshow="photo04" clicktohide="photo01,photo02,photo03,photo00,photo05,photo06"><img width="140" height="68" src="http://img53.xooimage.com/files/4/0/7/trucosfacebookrosa2-22aec54.png" /></a></li>

<li><a href="#" clicktoshow="photo05" clicktohide="photo01,photo02,photo03,photo04,photo00,photo06"><img width="140" height="68" src="http://img54.xooimage.com/files/e/b/8/trucosfacebookceleste2-22aec3c.png" /></a></li>

<li><a href="#" clicktoshow="photo06" clicktohide="photo01,photo02,photo03,photo04,photo05,photo00"><img width="140" height="68" src="http://img53.xooimage.com/files/a/d/6/trucosfacebooknegro2-22aec40.png" /></a></li>

</ul>

</div>

</div>

<div style="height:37px;color:#808080;font-size:10px;text-align:center;padding:10px 0 0 0;">

Copyright &copy; 2010 (NOMBRE DE TU PAGINA FACEBOOK) <br />

Redesign by <a href="http://cosasparaelface.blogspot.com">TRUCOS FACEBOOK</a>

</div>

</div>

edita lo que se encuentra en otro color

Ejemplo: http://www.facebook.com/trucosfb?v=app_10442206389