Galería del feed de blogger con paginación.
Vuelvo a poner una galería del feed de google pero con paginación, la base javascript ya ni me acuerdo de donde la obtuve, por desgracia no he podido incluirlo dentro de un widget html/javascript de blog, por lo tanto al final después de probar diferentes opciones y cambios de código he decidido no perder mas tiempo y subir la pagina en un servidor externo y incluirlo en el blog mediante un iframe, para el hecho ya queda bien. Se puede ver clicando la pestaña de GALERIA en el lado derecho de la pantalla.
La galería es de imágenes, pero se puede formatear como se quiera, pudiendo dar diversos usos.
Recordad que sólo funciona si todos los posts tienen una imágen.
Utiliza Javascript con JSON.Más información de JSON en :
- http://beautifulbeta.wikidot.com/json-feeds
- http://code.google.com/intl/es-ES/apis/gdata/docs/json.html
JSON
Object Meaning Example content
json The JSON-object -
json.feed The feed -
json.feed.title.$t Blog name Beautiful Beta
json.feed.updated.$t Date and time of last feed update 2007-03-18, 20:43
json.feed.author[] Array of Blog author names -
json.feed.author[0].name.$t Name of first Blog author Beta Bloke
json.feed.openSearch$totalResults Number of posts in the Blog 74
json.feed.entry[] Array of Blog entries -
json.feed.entry[i].title.$t Title of the ith post What's up here?
json.feed.entry[i].category[] Array of labels of ith post -
json.feed.entry[i].category[j].term jth label of ith post tools
json.feed.entry[i].published.$t Date and time ith post was published 2007-03-18, 12:27
json.feed.entry[i].updated.$t Date and time ith post was updated 2007-03-18, 12:35
json.feed.entry[i].author[] Array of ith post author names -
json.feed.entry[i].author[0].name.$t Name of first author of ith post Beta Bloke
json.feed.entry[i].content.$t The content of the ith post, as html It has been very quiet on ….
json.feed.entry[i].link[] Array of links of the ith post Explained below
Me he dado cuenta que al pegar el código en el blog algunas cosillas cambian, por lo tanto a parte de pegarlo aquí lo subiré a google sites para quien le interese pueda descargarlo en un archivo txt, solo recordar que tenéis que cambiarle la extensión a .htm .html .php o lo que queráis.
Para utilizarla tal cual esta solo debéis cambiar el "http://riverloom.blogspot.com/" por vuestro feed en la línea 119, 173 y 181; la variable "var numposts = 40 ;" numero de posts que queréis en la línea 52 y 158 del código. El css a vuestra discreción.
Código:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> riverloom </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.edgaleria2 a{font-size:14px;padding:10px;}
.edgaleria1 a:link, .edgaleria1 a:visited, .edgaleria1 a:hover {background:transparent;}
body{background:#000; font-size:12px;}
#eddgal2 { display:block; width:800px; margin: 0px; padding:0px; position:fixed; top:0px; left:0px; background:#000; border:15px solid #000; color: #ff9900; }
#eddgal2 ul {list-style-position: outside; display:inline; list-style:none;}
#eddgal2 li {float:left;}
#eddgal2 a img {border: 1px solid #940f04; padding:1px;}
#eddgal2 a:hover img {border: 1px solid #fff; padding:1px;}
#eddgal2 img {margin:2px;}
#eddgal2 a:link, #eddgal2 a:visited, #eddgal2 a:hover {background:transparent;}
#eddgal2 a:hover {color:#ff9900;}
.btn_ed li {position:relative; top:0px; left:0px; margin:0px; padding:0px;}
.btn_ed li {float:left;}
#edsuperpagi {float:right;}
</style>
<!--[if IE ]>
<style>
#eddgal2 { display:block; width:800px; margin: 0px; padding:0px; position:fixed; top:0px; left:0px; background:#000; border:10px solid #000; color:white; }
</style>
<![endif]-->
</head>
<body>
<div id="eddgal2">
<script type="text/javascript">
<!--
/**
* Lists the entries from the specified JSON feed
* by creating a new 'dl' element in the DOM.
* Each 'dt' is the title of the row, and each 'dd'
* is the content of the row. innerhtml
*/
function listEntries(json) {
removeOldResults();
var dl = document.createElement('ul');
var numposts = 40;
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
if (i == json.feed.entry.length) break;
var li = document.createElement('li');
var da = document.createElement('a');
var dodo = json.feed.title.$t + ' - ' + entry.title.$t ;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var link = entry.link[k].href ;
da.setAttribute('href', link );
da.setAttribute('title', dodo );
da.setAttribute('target', '_top' );
var edimg = document.createElement('img');
var medigm = entry.media$thumbnail.url ;
edimg.setAttribute('src', medigm );
edimg.setAttribute('alt', dodo );
da.appendChild(edimg);
li.appendChild(da);
dl.appendChild(li);
}
document.getElementById('data').appendChild(dl);
// Re-enable the ok button.
var ok_button = document.getElementById('ok_button');
ok_button.removeAttribute('disabled');
}
/**
* Called when the user clicks the 'OK' button to
* retrieve a spreadsheet's JSON feed. Creates a new
* script element in the DOM whose source is the JSON feed,
* and specifies that the callback function is
* 'listEntries' for a list feed and 'cellEntries' for a
* cells feed (above).
*/
function displayResults(query) {
removeOldJSONScriptNodes();
removeOldResults();
// Show a "Loading..." indicator.
var div = document.getElementById('data');
var p = document.createElement('p');
p.appendChild(document.createTextNode('Loading...'));
div.appendChild(p);
// Disable the OK button
var ok_button = document.getElementById('ok_button');
ok_button.disabled = 'true';
// Retrieve the JSON feed.
var script = document.createElement('script');
script.setAttribute('src', 'http://riverloom.blogspot.com/feeds/posts/default?alt=json-in-script&callback=listEntries&orderby=published&start-index='
+ query.key.value +
'&max-results=7777');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
var supernumero = (parseInt((query.key.value /40 ),10))+1;
document.getElementById('edsuperpagi').innerHTML = 'página ' + supernumero;
}
/**
* Removes the script element from the previous result.
*/
function removeOldJSONScriptNodes() {
var jsonScript = document.getElementById('jsonScript');
if (jsonScript) {
jsonScript.parentNode.removeChild(jsonScript);
}
}
/**
* Removes the output generated from the previous result.
*/
function removeOldResults() {
var div = document.getElementById('data');
if (div.firstChild) {
div.removeChild(div.firstChild);
}
}
//-->
</script>
<script>
/**
* creación de los botones. paginación
*/
function rp(json) {
var numposts = 40;
var totalp = parseInt(json.feed.openSearch$totalResults.$t,10);
var numpages = ( totalp / numposts );
document.write("<ul class='btn_ed'>");
for (var i = 0; i < numpages; i++) {
document.write("<li>");
var numero = (i * numposts)+1;
var item = "<form onsubmit='return false'> <input type='hidden' name='key' value='"+ numero +"' /> <button id='ok_button' onclick='displayResults(this.form);'> " + (i +1 ) + " </button> </form>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://riverloom.blogspot.com/feeds/posts/default?orderby=published&start-index=1&max-results=7777&alt=json-in-script&callback=rp"></script>
<span id='edsuperpagi'>página 1</span> <br/>
<div style='clear:both; width:100%; height:1px; display:block;'></div>
<div id="data"><script src="http://riverloom.blogspot.com/feeds/posts/default?orderby=published&start-index=1&max-results=7777&alt=json-in-script&callback=listEntries"></script></div>
</div>
</body>
</html>
descargar galeria-paginacion.txt
No hay comentarios:
Publicar un comentario