[b]Featured Content Glider:[/b] :idea: This script lets you painlessly showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, "glide in" slideshow. :idea: You can apply this trick to your fan-signs since it's very trendy right now. :idea: You can also apply this to your embedded mp3's, so you can easily switch to different player added with this cool effect.. XD [quote][b]Credits:[/b] Heartaches Headaches DynamicDrive[/quote] Image Preview: [b]Glider for Mp3's[/b] [img]http://img217.imageshack.us/img217/166/featuredmp3smh6.jpg[/img] [b]Glider for Fan-signs or featured friends[/b] [img]http://img505.imageshack.us/img505/9590/featuredfsgf6.jpg[/img] Requirements: Addbox Function and Patience () [b]Step 1:[/b] Copy and save the codes inside the url below as [b]blurredfunction.js[/b] [url=http://h1.ripway.com/cloudmp3/effect/blurredfunction.js]Click Code[/url] Done? Good [b]Step 2:[/b] Inside your main file, paste this code above your JS codes and edit the bold part. [quote]var blurredza = document.createElement("script"); blurredza.type = "text/javascript"; blurredza.src = "[b]URL_OF_BLURREDFUNCTION.JS[/b]"; document.getElementsByTagName("head")[0].appendChild(blurredza);[/quote] Done? Nice.. xd [b]Step 3(Featured Fan Sign):[/b] Paste this code inside your onload handler... and edit the red and the green colored text. [quote]var blurredfans="<div id='p-select' class='cssbuttonstoggler' align='center'><a href='#' class='toc'><span><font color=red>1</font></span></a><a href='#' class='toc'><span><font color=red>2</font></span></a><a href='#' class='toc'><span><font color=red>3</font></span></a><a href='#' class='toc'><span><font color=red>4</font></span></a><a href='#' class='toc'><span><font color=red>5</font></span></a><a href='#' class='toc'><span><font color=red>6</font></span></a><a href='#' class='toc'><span><font color=red>7</font></span></a><a href='#' class='toc'><span><font color=red>8</font></span></a><a href='#' class='toc'><span><font color=red>9</font></span></a><br><br><a href='#' class='toc'><span><font color=red>10</font></span></a><a href='#' class='toc'><span><font color=red>11</font></span></a><a href='#' class='toc'><span><font color=red>12</font></span></a><a href='#' class='toc'><span><font color=red>13</font></span></a><a href='#' class='toc'><span><font color=red>14</font></span></a><a href='#' class='prev'><span><font color=red>Prev</font></span></a><a href='#' class='next'><span><font color=red>Next</font></span></a></div>"+ "<div id='blurryfansign' class='glidecontentwrapper'>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"+ "<div class='glidecontent'><img src='[color=red]URL_OF_IMAGE[/color]'height='180' width='180'><br />[color=green]CAPTION[/color]</center></div>"; addBox("Featured Fan-Signs",blurredfans,"blurredfx","right"); featuredcontentglider.init({ gliderid: "blurryfansign", //ID of main glider container contentclass: "glidecontent", //Shared CSS class name of each glider content togglerid: "p-select", //ID of toggler container remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable selected: 0, //Default selected content index (0=1st) persiststate: false, speed: 500, //Glide animation duration (in milliseconds) direction: "rightleft", //set direction of glide: "leftright", or "rightleft" autorotate: true, //Auto rotate contents (true/false)? autorotateconfig: [3000, 2] })[/quote] [quote][b] LEGEND[/b] [color=red]URL_OF_IMAGE[/color] = http://img87.imageshack.us/img87/4637/formpjp6.jpg [color=green]CAPTION[/color] = SHYNESS[/quote] [b] Done? Quite easy ei? You can also apply the code above for featured friends[/b] [hr][hr][hr] Now i will going to teach you how to apply it for embedded mp3's Read and understand... aight? Requirements: any mp3 account that you can embed to your profile. So you can switch to different genre. Quantity: 3 or more.. it's up to you.. i will just show you how you can do it with 3 embedded mp3s. :idea: [b]All we have to do is follow [color=red]Step 3[/color] Above[/b] Paste this Inside your onload handler [quote]var blurredmeandyou="<div id='p-selectm' class='cssbuttonstoggler' align='center'><a href='#' class='toc'><span><font color=red>Genre 1</font></span></a><a href='#' class='toc'><span><font color=red>Genre 2</font></span></a><a href='#' class='toc'><span><font color=red>Genre 3</font></span></a><a href='#' class='toc'><a href='#' class='prev'><span><font color=red>Prev</font></span></a><a href='#' class='next'><span><font color=red>Next</font></span></a></div><br><br>"+ "<div id='blurrymp3' class='glidecontentwrapper'>"+ "<div class='glidecontent'>[color=blue]EMBEDDED_MP3[/color]</div>"+ "<div class='glidecontent'><div align=\"left\">[color=blue]EMBEDDED_MP3[/color]</div>"+ "</div><div class='glidecontent'>[color=blue]EMBEDDED_MP3[/color]</div>"; addBox("Select Your Genre",blurredmeandyou,"shyness","right"); featuredcontentglider.init({ gliderid: "blurrymp3", //ID of main glider container contentclass: "glidecontent", //Shared CSS class name of each glider content togglerid: "p-selectm", //ID of toggler container remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable selected: 0, //Default selected content index (0=1st) persiststate: false, speed: 500, //Glide animation duration (in milliseconds) direction: "leftright", //set direction of glide: "leftright", or "rightleft" autorotate: false, //Auto rotate contents (true/false)? autorotateconfig: [3000, 2] })[/quote] Ex of [color=blue]EMBEDDED_MP3[/color]: <">[quote]Important Reminder: If you want to use the feature content glider for mp3's you should set your player [color=red]autoplay=false[/color] if you are IE user... but if your FF user it's ok if it's [b]autoplay=true[/b][/quote] :idea: for new members this is what we call onload handler lols [quote][color=green]function onProfileLoad() {[/color] //START OF ONLOAD //CONTENT HERE [color=green]}[/color] //END OF ONLOAD HANDLER[/quote] [b]Step 4:[/b] Paste this below all your js codes... <">[b] Final Step:[/b] Yehey final step XD Paste this inside your CSS codes <">-Cloud

Last edited by blurrycloud (2008-09-13 07:04:14)