Enable preview function for other files (.jpg)

stit · **on:** July 12, 2009, 05:02:21 PM

Hi all,

is it possible to display the pictures in the same windows, with a preview funktion like for videos.
i don't want to install the extra Thumbnail & Preview Generator because i don't want images to be thumbnailed.
simply show the pictures in the same window in a new <div> by klicking the preview button.

i tried to delete the all "disabled" marks in here but it didn't work.

Code: [Select]

<td class="quickCol">{.switch|%item-ext%|,|
jpg,jpeg,png,bmp,tif,tiff|
  {.if|{.filesize|%folder-resource%\previews_and_thumbnails\prev-%item-name%.jpg.}
    |{.$preview-btn.}
    |<div class="quickBtn disabled hide"><img src="/template/{!theme}/images/preview.gif" alt="" align="middle"/></div>
  .}
|mp3,flv,mp4,m4a,mov,3gp,aac,avi,divx,wmv,wma|{.$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>

hope s.o. can give me a hint how to realize it.

big thx so far.

greetz
stit

TSG · **Reply #1 on:** July 12, 2009, 06:01:59 PM

You still need to create previews, it only displays the icon if there is a preview to show. Run the generator and deselect thumbnails. You don't have to install, its an executable..

stit · **Reply #2 on:** July 12, 2009, 09:08:33 PM

hmm i don't want to make new files.
i know that it's possible to make an image fit to a fixed width and height in a new <div>.

why is this not possible here ?
maybe you could add a flashplayer who can display these pictures correctly !?

or how can i make the preview button be displayed without the extra files !?

thanks so far.

TSG · **Reply #3 on:** July 13, 2009, 10:44:42 AM

To do what you ask is too complicated for me to explain... hopefully somebody has the time to help you.

rejetto · **Reply #4 on:** July 13, 2009, 10:53:58 AM

so, you want the pictures list, and by clicking "preview" you want it to be loaded in a corner of the screen without moving away from the list?

TSG · **Reply #5 on:** July 13, 2009, 11:06:06 AM

He wants the preview box to display the original image, so he doesn't have to have previews and thumbnails. But to set this up is quite complicated, this is the easiest way probably, untested.

Code: [Select]


Change this in the .tpl file.

[file]
<tr>
<td class="iconCol">
	<a href="%item-url%">
	<div style="background:url('/~img_file') center center no-repeat">{.switch|%item-ext%|,|jpg,jpeg,png,bmp,tif,tiff|
	<div style="background:url('previews_and_thumbnails/thumb-%item-name%.jpg') center center no-repeat"></div>|.}
	</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,bmp,tif,tiff|
<div class="quickBtn disabled hide"><img src="/template/{!theme}/images/preview.gif" alt="" align="middle"/></div>
|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>

Change this is rawr_previewbox.js.

// Insert Image
function spawnIMGBox(target,file) {
	img = new Image();
	img.src = file;
	if(img.complete) {
		spawnBox(target,640,360);
		setIMGBox(target,file,'setImmediatly');
	} else {
		setTimeout('setIMGBox("'+target+'","'+file+'","none");',10);
	}
}
function setIMGBox(target,file,status) {
	if(img.width!=0) {
		if(status == 'none') {
			spawnBox(target,640,360);
			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+'" id='+target+'ImageBox style="filter:alpha(opacity=0);opacity:0" width=640 height=360/>';
				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+'" width=640 height=360/>';
			setName(file);
			img = null;
		}
	} else {
		setTimeout('setIMGBox("'+target+'","'+file+'","none");',50);
	}
}

stit · **Reply #6 on:** July 13, 2009, 06:24:19 PM

Quote from: rejetto on July 13, 2009, 10:53:58 AM

so, you want the pictures list, and by clicking "preview" you want it to be loaded in a corner of the screen without moving away from the list?

right

Quote from: TSG on July 13, 2009, 11:06:06 AM

He wants the preview box to display the original image, so he doesn't have to have previews and thumbnails. But to set this up is quite complicated, this is the easiest way probably, untested.

big thx i will try it...

stit · **Reply #7 on:** July 14, 2009, 10:50:44 AM

the only change u made here is to remove the red marked, am i right ?

Code: [Select]

Change this in the .tpl file.

[file]
<tr>
<td class="iconCol">
	<a href="%item-url%">
	<div style="background:url('/~img_file') center center no-repeat">{.switch|%item-ext%|,|jpg,jpeg,png,bmp,tif,tiff|
	<div style="background:url('previews_and_thumbnails/thumb-%item-name%.jpg') center center no-repeat"></div>|.}
	</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,bmp,tif,tiff|
[color=red]  {.if|{.filesize|%folder-resource%\previews_and_thumbnails\prev-%item-name%.jpg.}
    |{.$preview-btn.}[/color]
    |<div class="quickBtn disabled hide"><img src="/template/{!theme}/images/preview.gif" alt="" align="middle"/></div>
[color=red]  .}[/color]
|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: i see in code no colors are allowed so here:
{.if|{.filesize|%folder-resource%\previews_and_thumbnails\prev-%item-name%.jpg.}
|{.$preview-btn.}
|<div class="quickBtn disabled hide"><img src="/template/{!theme}/images/preview.gif" alt="" align="middle"/></div>
.}
|mp3,flv,mp4,m4a,mov,3gp,aac,avi,divx,wmv,wma,swf,jpg,jpeg|{.$preview-btn.}|

i made these changes but the preview button is not shown. i first want the preview button to be displayed and therefore i only need to edit the template file, because there is the condition when the button should be displayed.

am i right so far?

i changed the switch for extension too:

Code: [Select]

[preview-btn]
<div id="s%sequential%" class="quickBtn hide" {.switch|%item-ext%|,|mp3,flv,mp3,flv,mp4,m4a,mov,3gp,aac,jpg,jpeg|name="mediaFile"|.}><a href="javascript:void(0);" onclick="initBox('Box-'+(%sequential%+1),this.name);" name="%item-full-url%"><img src="/template/{.!theme.}/images/preview.gif" alt="P" title="{.!lv_previewTitle.}" align="middle"/></a></div><span id="Box-%sequential%"></span>
[target]
{.switch|%item-ext%|,|gif,pdf,htm,html,css,js,txt,png,xml|target="_blank"|.}

but doesn't show up.

EDIT2:
I FOUND THE BUG:

Code: [Select]

<div class="quickBtn disabled hide"><img src="/template/{!theme}/images/preview.gif"<div class="quickBtn disabled hide"><img src="/template/{.!theme.}/images/preview.gif"
there are the points missing !!!
this is also in the current .tpl file.
now the button is more grey than the other i think this is the way is should be and not to be completely not displayed.
am i right ?

TSG · **Reply #8 on:** July 14, 2009, 10:54:35 AM

My mistake, should be like this.

Code: [Select]

[file]
<tr>
<td class="iconCol">
	<a href="%item-url%">
	<div style="background:url('/~img_file') center center no-repeat">{.switch|%item-ext%|,|jpg,jpeg,png,bmp,tif,tiff|
	<div style="background:url('previews_and_thumbnails/thumb-%item-name%.jpg') center center no-repeat"></div>|.}
	</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,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>

stit · **Reply #9 on:** July 14, 2009, 11:45:35 AM

Great it works !

in rawr_preview.js you just have to edit:

// Insert Image
function spawnIMGBox(target,file) {
img = new Image();
img.src = file;

And now the images are displayed as preview.
Perfekt that how i wanted it.

Big THX for support
stit

stit · **Reply #10 on:** July 14, 2009, 12:35:35 PM

I have another Problem, but this seems to be a deeper html/js problem.

i have changed the code to the following:

Code: [Select]

// Insert Image
function spawnIMGBox(target,file) {
	img = new Image();
	img.src = file;
	if(img.complete) {
		if(img.width>'700') {
			spawnBox(target,img.width*0.5,img.height*0.5);
		} else {
			spawnBox(target,img.width,img.height);
		}
		setIMGBox(target,file,'setImage');
	} else {
		setTimeout('setIMGBox("'+target+'","'+file+'","none");',10);
	}
}
function setIMGBox(target,file,status) {
	if(img.width!=0) {
		if(status == 'none') {
			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);
	}
}

so i resize the images if they are bigger that 700px to the 50% of its width.
but now my problem is, that the image is only displayed in its new size if i click twice on the preview button.
this seems to be because the code didn't analyse the picture completely.

i thought the img.complete condition is for that !?
how can i make sure that the picture is resized correctly by the first try ?

hopefully s.o. can help me.

greetz
stit

EDIT:
i got it. status has to be set as none and not setImmediately.
then the box is set first and then the image is loaded. that solves the problem.

here my code with which it works well:

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,img.width*0.5,img.height*0.5);
			} 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);
	}
}

EDIT2:

better solution with max-width:700px

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);
	}
}

Enable preview function for other files (.jpg)

stit

Enable preview function for other files (.jpg)

TSG

Re: Enable preview function for other files (.jpg)

stit

Re: Enable preview function for other files (.jpg)

TSG

Re: Enable preview function for other files (.jpg)

rejetto

Re: Enable preview function for other files (.jpg)

TSG

Re: Enable preview function for other files (.jpg)

stit

Re: Enable preview function for other files (.jpg)

stit

Re: Enable preview function for other files (.jpg)

TSG

Re: Enable preview function for other files (.jpg)

stit

Re: Enable preview function for other files (.jpg)

stit

Re: Enable preview function for other files (.jpg)