<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'></script>
<style type='text/css'>
.contenedorsli {
width: 650px;
margin: 0 auto;
height: 250px;
}
#slider {
position: relative;
overflow: hidden;
width: 100%;
height: 250px;
border: 4px solid #333;
margin: 0 auto;
padding: 0;
}
#slider > div {position: absolute;top: 0;left: 0;width: 100%;padding:0;}
#slider img {
width: 100% !important;
height: 250px !important;
margin: 0;
padding: 0;
border: 0;
}
#slider p {
position: absolute;
left: 0;
top: 0;
height: 250px;
width: 200px;
margin: 0;
padding: 10px;
color: #FFF;
background: #333;
font-size: 18px;
font-weight: bold;
line-height: 22px;
padding-top: 50px;
text-align: center;
filter: alpha(opacity=90);
opacity: .9;
box-sizing: border-box;
sizing: border-box;
box-sizing: border-box;
transition: all .5s;
transition: all .5s;
transition: all .5s;
}
#slider:hover p {bottom: 0;background: #990000;}</style><br />
<script type="text/javascript">//<![CDATA[
// Motor del slider
$(function(){
$('#slider div:gt(0)').hide();
setInterval(function(){
$('#slider div:first-child').fadeOut(2000)
.next('div').fadeIn(2000)
.end().appendTo('#slider');},5000);}
);
// Obtener entradas aleatorias
var numposts_gal = 6;
var salida_gal = '';
function slideraleatorio(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {indexPosts[i] = i;}
// Línea para reordenar aleatoriamente las entradas leídas
indexPosts.sort(function() {return 0.5 - Math.random()});
if (numposts_gal > numPosts) {numposts_gal = numPosts;}
for (i = 0; i < numposts_gal; ++i) {
var entrada = json.feed.entry[indexPosts[i]];
var titulo = entrada.title.$t;
for (var k = 0; k < entrada.link.length; k++) {
if ( entrada.link[k].rel == 'alternate') {enlace = entrada.link[k].href;break;}
}
if ("content" in entrada) {var contenido = entrada.content.$t;}
x = contenido;
a = x.indexOf("<img");
b = x.indexOf("src=\"", a);
c = x.indexOf("\"", b + 5);
d = x.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {var imagen = d;}
else {var imagen = 'http://lh4.googleusercontent.com/-xOm3GjEeKp0/T29pY9DlYPI/AAAAAAAACUY/Ec_j6_CMB5M/s000/sin-imagen.png';}
salida_gal += '<div><a href="' + enlace + '"><img src="' + imagen + '" /><p>' + titulo + '</p></a></div>';
}
document.getElementById('slider').innerHTML = salida_gal;
}
//]]></script>
<div class="contenedorsli"><div id="slider"></div></div><script src="http://www.madad2.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=slideraleatorio&max-results=500"></script>
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |