overlay document viewer

[moosey_man1988]

Hi Everyone

 

I'm quite new to php, and im currently doing a learn as i go project,

I've created a kind of customer portal, where you can add notes and documents for that specific customer

 

on the file upload i defines which file i have uploaded and puts it as a note, and displays all the notes and files for that customer on the customers page.

 

On the notes table I have icons defined by the file type e.g a pdf upload will have a pdf icon.

when clicking on the icon it will download the file, but i want to go one better than that,

 

I want to be able to hover over the icon with my mouse and this views the document in an overlay when clicking either side of that document it will hide that middle viewer.

 

I've attached an image of what i currently have, any help is greatly appreciated in advance,

 

 

I am a little baffled with this one and don't know where to start but i know it can be achieved, 

can any one advise me how this can be achieved and if there are specific things i require e.g this needs to be done in javascript?

 

Would i need something like php magik?

 

 

 

[Muddy_Funster]

Javascript or a.n.other client side language will be required for this.  however, be very careful about things like hover events - especially if you are using them with a modal, people move their mouse all over the place without thought or intent, and if your going to block the screen with popups every time the skim over a part of the screen you're just going to p*** people off.

[moosey_man1988]

Muddy Thank you so much for your comment, I will get working on this and on completion i'll send a picture

 

I actually spotted a jquery one that looks really nice, and also you can buy it for £6.... worth it?

 

I very much prefer jquery as i find its lightning fast.

[Muddy_Funster]

this is more jqueryUI than plain jquery.  as to if it's worth it or not, that's something only you, as the developer, can answer.  In most cases it would certainly be worth it as it would cost more in man hours to have a front end developer write it (properly, including debugging, sense checking and quality testing) from scratch.

[moosey_man1988]

Hi, I've got the code working I used ViewerJS, here's my code

<?php if(mysql_num_rows($note_query)!=0) {
		do { 
		// if($note_rs['method'] == "note"){
	// $method= "images/icons/blue_circle_pen.png";
	// }
	// elseif($note_rs['method'] == "PlainText")
	// $method= "images/icons/blue_circle_notepad.png";
	if($note_rs['method'] == "note"){
	$noteLink= "<td><img src='images/icons/blue_circle_pen.png' alt='pen' style='width:30px'></td>";
	}
	elseif($note_rs['method'] == "PlainText"){
	$noteLink= "<td><a href=".$note_rs['location']."/".$note_rs['fileName']."><img src='images/icons/blue_circle_notepad.png' alt='notepad' style='width:30px'></a></td>";	
	}
	elseif($note_rs['method'] == "PDF"){
	$noteLink= "<td><a href=js/ViewerJS/#/".$note_rs['location']."/".$note_rs['fileName']."><img src='images/icons/blue_circle_pdf.png' alt='notepad' style='width:30px'></a></td>";
	}
	elseif($note_rs['method'] == "MsDoc"){
	$noteLink= "<td><a href=".$note_rs['location']."/".$note_rs['fileName']."><img src='images/icons/blue_circle_msword.png' alt='notepad' style='width:30px'></a></td>";
	}
		?>		
		<tr><td><?php echo $note_rs['customerId']; ?></td>
		<td><?php echo $note_rs['note']; ?></td>
		<td><?php echo $note_rs['user']; ?></td>
		<td><?php echo date("d-m-Y H:i:s", strtotime($note_rs['Date']));?></td>
		<?php echo $noteLink;?></tr>
		<?php	} while ($note_rs=mysql_fetch_assoc($note_query));
}	else {
		echo "No results found";
}
?>

But I need to make this hover, and display over the top of the current page, not a new link, how can i achieve this?

[Muddy_Funster]

you would need to call the viewer function through a custom mouseover event on each img element.

[moosey_man1988]

okay muddy i think you might have gone a little over my head with that one :| I'll try google what you said in some fashion  

 

Thanks for your help though, this wouldn't have been possible for me without your input

[Muddy_Funster]

You're welcome, although someone else would have stepped in had I not, so you're giving me just a little too much credit I think.

 

if you are using jQuery then have a look at the jQuery.on() to see more about events.

 

you will be wanting to do something that looks a bit like this (but is not this as this is just an over simplified example)...

$('img').on("mouseover", function showOverlay(){
//either call the third party function from ViewerJS or code up your own modal overlay in here
});

 

although, this will apply the mouse over event to every image, so you would probably want to have a class identifier on the images that you want to attach the event use and then attach the event through that.

 

best of luck.

[moosey_man1988]

Hi guys so basically I've tried to do it as best i can but unfortunately it doesnt seem to be possible, but what someone did suggest is using something like convert or imagemagik that will convert the pdf into an image and then have them display as a scale-able image, I've got it to convert the pdf's just find but it does it page by page so what I'm left with is

 

document.pdf (4 pages converted to)

document1.jpg

document2.jpg

document3.jpg

document4.jpg

 

Does anyone know who i can display all these images on 1 page as a load of scalable images, like thumbnails that expand?

 

e.g I have document1, document2, document3 with 100 by 100px but when mouse over, the scale to 1000,1400 px for example, I may draw an image to help explain if this is a little tricky to understand

[Muddy_Funster]

You can use jQueryUI to "pop-up" an html page.  That page can have a pdf embedded in it the same as any other...It is possible with a little jiggery-pokery to get what you want. See here: http://api.jqueryui.com/dialog/