plantaardigheidje
Gebruiker
- Lid geworden
- 8 sep 2014
- Berichten
- 5
hallo forumleden, ik hoop dat jullie hier mij bij kunnen helpen.
Ik heb al menig uurtje zitten staren, aanpassen, toevoegen, wijzigen, maar niets leidt er toe dat de thumbnails op mijn pagina naar de bovenkant centreren.
Het gaat om deze pagina:
http://www.plantaardigheidjes.nl/p/blog-page.html
Hierin is de volgende code opgenomen:
die roept twee scripts aan, waaronder IndexFormat.js
en deze:
IndexParameter.js
Een voorbeeld van hoe ik de uitlijning zou willen:
http://www.barefeetinthekitchen.com/2011/04/vegetables.html
Ik hoop heel erg dat ik 1. in het juiste forum zit, of toch in het CSS forum moet zitten en 2. dat iemand mij kan helpen. Ik word er inmiddels tureluurs van
Ik heb al menig uurtje zitten staren, aanpassen, toevoegen, wijzigen, maar niets leidt er toe dat de thumbnails op mijn pagina naar de bovenkant centreren.
Het gaat om deze pagina:
http://www.plantaardigheidjes.nl/p/blog-page.html
Hierin is de volgende code opgenomen:
HTML:
<style> .date-header {display:none;} </style>
<script src="http://www.worldofdani.com/blog/IndexFormat.js"></script>
<script src="http://www.worldofdani.com/blog/IndexParameter.js"></script>
<script src="http://www.plantaardigheidjes.nl/feeds/posts/default/-/recept?orderby=published&alt=json-in-script&callback=recent&max-results=999"></script>die roept twee scripts aan, waaronder IndexFormat.js
HTML:
function recent(json) {
document.write('<style type="text/css">');
document.write('.sitemap-container {width: 100%;}');
document.write('.sitemap-container:hover {background-color:#000000;}');
document.write('.thumbnail {width: ' + thumbWidth + '; height: ' + thumbHeight + '; thumbAlign: top;}');
document.write('.posttitle {padding-top: 5px; font-size: small;}');
document.write('</style>');
document.write('');
var n = 1;
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var thumburl;
try {
thumburl = entry.media.url;
} catch (error)
{
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d;
} else thumburl = 'http://2.bp.blogspot.com/-fyukB_HLG_w/UbManI7ySAI/AAAAAAAADsM/brwpVvFPtOM/s1600/nothumb.jpg';
}
if (showpostthumbnails == true)
if ( i < json.feed.entry.length - 1 ) {
if (i == 0){
document.write('<table width="' + tableWidth + '%" cellpadding="' + cellPad + '">' + '<tbody>' + '<tr>' + '<td width=' + cellWidth + ' height=' + cellHeight + '>'+'<div class="thumbnail">' + '<a href="' + posturl + '"><img id="postimg" src="' + thumburl + '" title="' + posttitle + '" alt="' + posttitle + '" style="width:' + thumbWidth + ';height:' + thumbHeight + ';"/></a>' + '</div>');
document.write('<div class="posttitle">' + '<a href="' + posturl + '">' + posttitle + '</a>' + '</div>');
document.write('</td>');
n = 2;
} else if (n == 1) {
document.write('<tr>' + '<td width=' + cellWidth + ' height=' + cellHeight + '>' + '<div class="thumbnail">' + '<a href="' + posturl + '"><img id="postimg" src="' + thumburl + '" title="' + posttitle + '" alt="' + posttitle + '" style="width:' + thumbWidth + ';height:' + thumbHeight + ';"/></a>' + '</div>');
document.write('<div class="posttitle">' + '<a href="' + posturl + '">' + posttitle + '</a>' + '</div>');
document.write('</td>');
n += 1;
} else if (n > 1 && n < indexWidth) {
document.write('<td width=' + cellWidth + ' height=' + cellHeight + '>'+'<div class="thumbnail">' + '<a href="' + posturl + '"><img id="postimg" src="' + thumburl + '" title="' + posttitle + '" alt="' + posttitle + '" style="width:' + thumbWidth + ';height:' + thumbHeight + ';"/></a>' + '</div>');
document.write('<div class="posttitle">' + '<a href="' + posturl + '">' + posttitle + '</a>' + '</div>');
document.write('</td>');
n += 1;
} else if (n == indexWidth){
document.write('<td width=' + cellWidth + ' height=' + cellHeight + '>' + '<div class="thumbnail">' + '<a href="' + posturl + '"><img id="postimg" src="' + thumburl + '" title="' + posttitle + '" alt="' + posttitle + '" style="width:' + thumbWidth + ';height:' + thumbHeight + ';"/></a>' + '</div>');
document.write('<div class="posttitle">' + '<a href="' + posturl + '">' + posttitle + '</a>' + '</div>');
document.write('</td>' + '</tr>');
n = 1;
}
} else {
document.write('<td width=' + cellWidth + ' height=' + cellHeight + '>' + '<div class="thumbnail">' + '<a href="' + posturl + '"><img id="postimg" src="' + thumburl + '" title="' + posttitle + '" alt="' + posttitle + '" style="width:' + thumbWidth + ';height:' + thumbHeight + ';"/></a>' + '</div>');
document.write('<div class="posttitle">' + '<a href="' + posturl + '">' + posttitle + '</a>' + '</div>');
document.write('</td>' + '</tr>' + '</tbody>' + '</table>');
}
var towrite = '';
var flag = 0;
document.write('<div class="fix"></div>');
//if (displayseparator == true)
// if (i != (numposts - 1))
// document.write('');
}
}en deze:
IndexParameter.js
HTML:
var numposts = 999;
var showpostthumbnails = true;
var indexWidth = 4;
var thumbWidth = "120px";
var thumbHeight = "auto";
var thumbAlign = "top";
var titleWidth = "120px";
var titleHeight = "90px";
var cellverticalAlign = "top";
var cellPad = 8;
var tableWidth = 90;
var cellWidth = 120;
var cellHeight = 300;
/*
The parameters listed below control the look and feel of your thumbnail index page.
numposts
This value controlls the maximum number of posts that will be fetched from your
Blogger rss feed.
*Value 1 to 999.
showpostthumbnails
If you set this to false you will not see thumbnails in your index.
Mostly used for troubleshooting.
*Value true or false
indexWidth
This is the number of thumbnails that you want displayed in a single line.
thumbWidth
This is the width of the thumbnail that the script will generate from your
rss feed.
thumbHeight
This is the height of the thumbnail that the script will generate from your
rss feed.
titleWidth
This is the width of the title block that will be displayed below the thumbnail
image.
titleHeight
This is the height of the title block that will be displayed below the thumbnail
image.
cellPad
This is the number of pixels between the cells in the table.
tableWidth
This is the width of the table as a percentage of the page.
cellWidth
This is the width of the cell that the script will use to display your thumbnail.
cellHeight
This is the height of the cell that the script will use to display your thumbnail.
*/Een voorbeeld van hoe ik de uitlijning zou willen:
http://www.barefeetinthekitchen.com/2011/04/vegetables.html
Ik hoop heel erg dat ik 1. in het juiste forum zit, of toch in het CSS forum moet zitten en 2. dat iemand mij kan helpen. Ik word er inmiddels tureluurs van
Laatst bewerkt:
