Picture Preview without TPGen

[stit]

Hi all,

for everyone who doesn't want to use TPGen to create a preview for pictures, here the edited script for preview from original files:

Edit in .tpl file

Code: [Select]

[file]
<tr>
<td class="iconCol">
<a href="%item-url%"><div style="background:url('/~img_file') center center no-repeat"></div> </a>
</td>
<td class="fileCol{.if not|{.get|can access.}|protected.}">
<div class="fileInfo">
<a href="%item-url%" {.$target.}>%item-name%{.if|{.get|is new.}|&nbsp;-&nbsp;<b class="new">{.!lv_new.}</b>.}</a><br/>
%comment%
<div class="info"><b>{.!lv_size.}:</b> %item-size%</div><div class="info"><b>{.!lv_hits.}:</b> %item-dl-count%</div><div class="age"><b>{.!lv_age.}:</b> %item-modified%</div>
</div>
</td>
<td class="quickCol">{.switch|%item-ext%|,|jpg,jpeg,png,gif,bmp,tif,tiff,mp3,flv,mp4,m4a,mov,3gp,aac,avi,divx,wmv,wma,swf|{.$preview-btn.}|<div class="quickBtn disabled hide"></div>.}
<noscript><div class="quickBtn disabled"></div></noscript>
<div class="quickBtn1 {.if not|{.get|can access.}|disabled.}"><a href="%item-url%" {.$target.}><img src="/template/{.!theme.}/images/download.gif" alt="DL" title="{.!lv_downloadTitle.}"/></a></div>
</td>
</tr>
Edit in rawr_preview.js

Code: [Select]

// Insert Image
function spawnIMGBox(target,file) {
img = new Image();
img.src = file;
if(img.complete) {
spawnBox(target,img.width,img.height);
setIMGBox(target,file,'none');
} else {
setTimeout('setIMGBox("'+target+'","'+file+'","none");',10);
}
}
function setIMGBox(target,file,status) {
if(img.width!=0) {
if(status == 'none') {
if(img.width>'700') {
spawnBox(target,700,img.newheight);
} else {
spawnBox(target,img.width,img.height);
}
status = 'boxLoaded';
}
if(status == 'boxLoaded') {
setTimeout('setIMGBox("'+target+'","'+file+'","setImage");',325);
} else if(status == "setImage") {
if(img.complete) {
gEBI(target+'Content').innerHTML = '<img src="'+img.src+'" width="100%" id='+target+'ImageBox style="filter:alpha(opacity=0);opacity:0"/>';
boxFade(target,'img');
setName(file);
img = null;
} else {
setTimeout('setIMGBox("'+target+'","'+file+'","setImage");',200);
}
} else if(status == 'setImmediatly') {
gEBI(target+"Content").innerHTML = '<img src="'+img.src+'"/>';
setName(file);
img = null;
}
} else {
setTimeout('setIMGBox("'+target+'","'+file+'","none");',50);
}
}
Have fun.

stit

[stit]

I created a better code for ensuring that the images which are recorded vertical are not displayed with a height > 600.

It makes the images to fit to max height 600px and max width 600px by keeping the ratio

Code: [Select]

function setIMGBox(target,file,status) {
if(img.width!=0) {
if(status == 'none') {
if(img.width>'600') {
ratio = img.width/img.height;
img.newheight = 600/ratio;
if(img.newheight>'600') {
img.newheight = 600;
img.newwidth = ratio*img.newheight;
spawnBox(target,img.newwidth,img.newheight);
} else {
spawnBox(target,600,img.newheight);
}
} else {
spawnBox(target,img.width,img.height);
}
status = 'boxLoaded';
}