Lightbox for images

michaelD · #1 02-08-2010, 07:02 PM

First and Foremost! This mod does not belongs to me NOR I wrote this. This mod was written by PoorBoy. This mod is AS IS and does not have any guarantee OR warranty of any kind.

Rule #1: Do not link from any files presented on this tutorial. You will have to download your own copy and rename it as suggested on this tutorial.

Rule #2: Bugs and problems must be posted in this forum. You will get a faster response to your inquiries that way than sending a PM to me.

Enough of the First and the Rules. I need to get going before the caffeine in my system runs out and I will be lazy as a geek toad observed in the wilds.

Requirements: Download these files and change their extension as explained below.
1. These are the javascripts. Make sure the extensions are changed to .js , before uploading them to your server. File one: jquery. File two: Thickbox compressed .

2. This is the css file for the lightbox or the thickbox. ONE file ONLY: CSS.

Steps:
1. You can either save the thickbox.txt as thickbox.css and then call the file to your index.php. OR just copy the entire css codes and paste it to yourDefaultTemplate/skin1.css. Regardless of the implementation you choose, the script will work.

2. If you are not going to include the css to the default template css file, then you need to create a new folder in the same directory as the vidiscript. Name this directory as "css". Upload the thickbos.css to this newly created "css" folder.

3. Rename the file jquery_light.txt to jquery_light.js. Do the same to the file thickbox-compressed.txt. Upload these files to the folder (directory) named "js" in your server.

3. Make a backup copy or your index.php. Open the index.php of your site. and find the <head> tag. Below it add;

Quote:

save or re-upload the updated index.php back to your server.

4. Now for the fun part of this tutorial. Once again, I am going to put my own disclaimer. I DID NOT WRITE this MOD! This is PoorBoy's Mod. Mathematics is the very last thing I will code.

. I am not gifted in doing it, so I will just stick to the things I can do best.

OPEN: includes/play.inc
SCROLL DOWN: Don't stop until you find these codes; Unfortunately, I am not able to provide you with the precise line number, because my play.inc is definitely different than what you have. ( I have a chopped version of the script).

Quote:

else if ($row['mediatype'] == "image") {

$mediaPlayer = $player['before'].'<h4><b><div align=center>Click For Full View</div></b></h4><a href="'.$sitepath.'uploads/'.$row['mediaurl'].'" target="_blank"><img width=476 height=371 src="'.$sitepath.'uploads/'.$row['mediaurl'].'"></a>'.$player['after'];

$remoteCode = '<textarea READONLY WRAP=SOFT ROWS=3><img src="'.$sitepath.'uploads/'.$row['mediaurl'].'"></textarea>';
[/color]

Make sure you find the precise codes as quoted above. Otherwise, this mod is not going to work. THE RED and BOLD codes shown above mus be deleted. Your final codes AFTER deletion should be like this

Quote:

else if ($row['mediatype'] == "image") {

$remoteCode = '<textarea READONLY WRAP=SOFT ROWS=3><img src="'.$sitepath.'uploads/'.$row['mediaurl'].'"></textarea>';
}

Now insert these codes on the location of deleted portion of the script.

Quote:

//the following codes was written by Poorboy from http://vidiscript.com/forums/
$image_location =$row['mediaurl'];
$site ="$sitepath";
list($width, $height) = getimagesize("'.$site.'uploads/$image_location");
//and then we will used the information from above

$actual_width = $width;
$x = $width;
$actual_height = $height;
$y = $height;

$imax_height = "400";
$y_m = $imax_height;
$imax_width = "400" ;
$x_max = $imax_width;
$allowance = "0.05%";
// layout the condition of proportionality

if ($y > $x )
{
//Define the possible proportional quotient for both sides if the condition above is met.
$pos_proportion_height = $y_m/$x_max;
$pos_proportion_width = $pos_proportion_height;
//$pos_proportion_width = ($max_width / $actual_width);

//Get the most feasible proportional height
$final_height = ($pos_proportion_height*$y_m);

//Get the most feasible proportional widht
$final_width = ($pos_proportion_width*$x_max);

//put the image mediaplayer codes here
$mediaPlayer = $player['before'].'<h4><b><div align=center>Click For Full View option 1</div></b></h4><a href="'.$sitepath.'uploads/'.$row['mediaurl'].'?keepThis=true&TB_iframe=true&height=800&width=600" class="thickbox"><img width="'.$final_width.'" height="'.$final_height.'" src="'.$sitepath.'uploads/'.$row['mediaurl'].'"></a>'.$player['after'];

}
if ($x == $y )
{
$pos_proportion_height1 = $y_m / $y;
$pos_proportion_width1 = $x_max / $x;
//Get the most feasible proportional height
$final_height1 = ($pos_proportion_height1 * $y_m);

//Get the most feasible proportional widht
$final_width1 = ($pos_proportion_width1 * $x_max);
$mediaPlayer = $player['before'].'<h4><b><div align=center>Click For Full View option 2 '.$y.'</div></b></h4><a href="'.$sitepath.'uploads/'.$row['mediaurl'].'?keepThis=true&TB_iframe=true&height='.$height.'&width='.$width.'" class="thickbox"><img width="'.$x_max.'" height="'.$y_m.'" src="'.$sitepath.'uploads/'.$row['mediaurl'].'"></a>'.$player['after'];
}
else {

$mediaPlayer = $player['before'].'<h4><b><div align=center>Click For Full View option 3 '.$x.'</div></b></h4><a href="'.$sitepath.'uploads/'.$row['mediaurl'].'?keepThis=true&TB_iframe=true&height='.$height.'&width='.$width.'" class="thickbox"><img width="'.$x_max.'" height="'.$y_m.'" src="'.$sitepath.'uploads/'.$row['mediaurl'].'"></a>'.$player['after'];

}

Save and re-upload the play.inc to your server. Now your site should be a little bit smarter in handling images and with the lightbox mod implemented.

For questions and problems, please post it here. I will try my best to respond to the best of my ability.

Well, the coffee is running out. I could see my skin turning into green which means I am once again becoming a LAZY GEEK TOAD.

michaelD · #2 02-09-2010, 08:30 PM

UPDATE!

The image proportioning script has bugs. I need to wait for poorboy to fix it. The lightbox function works. Only the aspect ratio do not work at this moment. I think the reason behind it is that PoorBoy used "if" inside the else if. He might have been confused on the usage as if he is writing it for phyton. Not sure

His newly updated codes are shown below, and it is working as stand alone..the input image must be defined first. AGAIN, THIS WILL NOT WORK (image)., because of condition set "if" and elseif.

Quote:

//the following codes was written by Poorboy from http://vidiscript.com/forums/
$image_location =$row['mediaurl'];
$site ="$sitepath";
list($width, $height) = getimagesize("'.$site.'uploads/$image_location");
//and then we will used the information from above
//define the x and the y
$x = $width;
$y = $height;
//Use the above info. is it rectangle? square? or a tall images??
//define types of images
$tall_images = $y > $x;
$wide_images = $x > $y;

//squares always gets a break of + 10 to 20%

$square = "($x + ($x * 0.10) = $y + ($y * 0.10 )) || ($x = $y)";

//define the the maximum space for images this is the media player
$max_width = "480";
$max_height = "380";
$max_q = $max_height / $max_width; // this is actually the slope of the image. Not very important, but it is good to have it here.

//redefine the maxies
//let
$x_max = $max_width;
//and
$y_max = $max_height;

//condition one. This is for the wide images
if ($x > $x_max){
//subtract the maximum width allowed from the wide image
$diff_max = ($x - $x_max);
//find the quotient of the actual image h vs. w
$q_ofxy = $x / $y;
//divide how are we going to trim to make it fit
$qxmax = round($diff_max / $q_ofxy );
//trim the width for the play page height
//$final_width = $x_max;
$final_width = $x_max ;
//final height proportional to x_max
$final_height = $y - round($qxmax * $q_ofxy);

//put the image mediaplayer codes here
$mediaPlayer = $player['before'].'<h4><b><div align=center>Click For Full View </div></b></h4><a href="'.$sitepath.'uploads/'.$row['mediaurl'].'?keepThis=true&TB_iframe=true&height=600&width=800" class="thickbox"><img width="'.$final_width.'" height="'.$final_height.'" src="'.$sitepath.'uploads/'.$row['mediaurl'].'"></a>'.$player['after'];

}
//condition two for tall images

elseif ($y > $y_max) {
//the image is taller than maximum height the div can accomodate

//, subtract the maximum height y_max from the actual height y
$diff_maxy = ($y - $y_max);

//find the aspect ratio of the image
$q_ofyx = ($y/$x);

//divide the difference of the above with the aspect ratio to find out how much we have to trim to the actual height to make it fit.
$qymax = round($diff_maxy / $q_ofyx );

//trim the height this will be the actual height

$final_height2 = $y_max;

//trim the width this will be the actual width
//hence the width is shorter than the height the actual width is
$final_width2 = $x - round($q_ofyx * $qymax );

//put the image mediaplayer codes here
$mediaPlayer = $player['before'].'<h4><b><div align=center>Click For Full View Tall</div></b></h4><a href="'.$sitepath.'uploads/'.$row['mediaurl'].'?keepThis=true&TB_iframe=true&height=800&width=600" class="thickbox"><img width="'.$final_width2.'" height="'.$final_height2.'" src="'.$sitepath.'uploads/'.$row['mediaurl'].'"></a>'.$player['after'];

}
//condition three if non of the above are true
else {
$mediaPlayer = $player['before'].'<h4><b><div align=center>Click For Full View </div></b></h4><a href="'.$sitepath.'uploads/'.$row['mediaurl'].'?keepThis=true&TB_iframe=true&height='.$height.'&width='.$width.'" class="thickbox"><img width="'.$x_max.'" height="'.$y_max.'" src="'.$sitepath.'uploads/'.$row['mediaurl'].'"></a>'.$player['after'];

}

poorboy · #3 02-10-2010, 04:42 PM

Michael,

Dude, I gave the script to you for you to fit it in vidiscript LOL

. It is time for the bruin to shine.

I wasn't confused with the python, I was just probably tired, and the closest thing I can be confused with the php is perl.

The thing is don't be too academic. Coding is fun, because I can literally make up anything I want. I will leave the script for you to modify. It shouldn't be that hard to put it inside the play.inc.

Remember;

if(myname = poorboy)
{
echo "hello Poorboy";
}
elseif (myname = michael) {

echo"wuzz up Michael";

}

elseif (myname = '') {

echo"Hey Stranger What is your name?";

}

else {

echo "I have no idea who you are, you need to sign up for an account. Are you be willing to do it now? <a href=\"register.php\">Click Here</a>";

}

you are just too funny Michael. Don't be a lazy TOAD..

poorboy · #4 02-10-2010, 05:28 PM

Michael,

You can write it as a function and then plug it in. Another way of doing this is the reverse approach. Reverse approach is where you read the uploads directory, sort the image as item and compare to the $row[mediaurl]. If the $item is = to the $row[mediaurl], then do the image manipulation by using the above codes.

By the way, in case you did not notice above, I intentionally left out the $ in myname.

Have a great day now you guys..

poorboy · #5 02-12-2010, 03:31 PM

Michael,

>>>I sent you an encoder class and functions I wrote last night. Since that you already chopped your copy of vidiscript, why not take it to the next level.

>>In the upload.inc, find all the occurrence of

[bold]exec($ffmpegpath." -y -i ".$upload_path.$filename_without_ext.".flv -f mjpeg -s ".$sw."x".$sh." -vframes 1 -ss ".$thumbtime." -an ".$upload_path."thumbs/".$filename_without_ext.".small.jpg");[/bold]

>>Remove all of them from the play.inc including the exec command for video encoder.

Here is the flow:
>>Create a new directory in the uploads folder name it anythingyouwant, or temptoencode CHMOD 0777
if ($ext == 'flv') {

//some media validation here already on the script

//Put the database inclusion here to record the newly uploaded media
}

//Create a new function here to double check and make sure the new media made it to the temptoencode folder and the database entries has been successful.

//If the above are all well, execute the encoding class.

exec("$myencoder_class > /dev/null &");

//here echo or print the message you want the member to see after upload
//e.g. You uploaded media is being process and it will be available shortly.

The encoder class will only keep the member in the upload page during upload and they don't have to wait until the encoding has been initiated or finished. Once the upload is finished, they can go to any part of the website. The video will become available for viewing after 10 to 30 minutes depending on the servers speed.

I am also working on the uber uploader, but don't know when can I make this to work with the vidiscript.

nextgen · #6 02-12-2010, 10:25 PM

So after all of this will the lightbox work or not ?

michaelD · #7 02-12-2010, 10:42 PM

Hi,

The lightbox will work. The included codes above are for proper resizing of tall images and wide images.

This mod has been carried over from the previous member to member question.

These codes,

Quote:

else {
$mediaPlayer = $player['before'].'<h4><b><div align=center>Click For Full View </div></b></h4><a href="'.$sitepath.'uploads/'.$row['mediaurl'].'?keepThis=true&TB_iframe=true&height='.$height.'&width='.$width.'" class="thickbox"><img width="'.$x_max.'" height="'.$y_max.'" src="'.$sitepath.'uploads/'.$row['mediaurl'].'"></a>'.$player['after'];

}

will be executed even those other codes that came before failed. You will get the lightbox function.

nextgen · #8 02-13-2010, 05:20 AM

thanks for the reply friend. Will you still be doing more mods for vidiscript, free or otherwise, i would gladly pay for new enhancements.

michaelD · #9 02-13-2010, 10:59 AM

Hi,

You're welcome. Yes, I will be writing a few mods. All of my mods will be with FREE version and For Pay. I also have a new templates design that are pretty much have the attitude to stand side by side with other video sharing website.

I also implemented the live search using ajax. This is commonly find or seen on google search. When you type in something on the search box, the script suggests a terms or keyword coming from the contents of the site. This mod completely removed the original vidiscript search function. Other version I have is the rss parser (this will work for youtube video and others). About the forum and blog integration, this is still ON, but need to fix some bugs.

On PoorBoy side, he has too many modifications for this script. He wrote too many import scripts, but until now he is confused on which one to release. He also have the fastest import script I have seen. It can transfer any file from one server to your server in blazing speed. I tested it, and it only took 2 seconds to transfer a 40MB video from youtube to my demo site.

He is also currently working on encoder class for the vidiscript. This is very important upgrade for the script. This mod will keep the video encoding processes in the background with the flvtool2 piped in function already included in one command line. He is also considering implementing the uber uploader in vidiscript. Vidiscript uploader sucks

.

Front page random player like the one seen on phpmotion website. Poorboy will be releasing it as FREE mod, but donations are welcome. He is also updating the JW player and Flowplayer integration in the admin page. This is very important. people will no longer have to dig on the play.inc just to change the player codes. This mod will be completely controlled inside the admin area.

Some of the mods I am currently very interested is the SERVER load balancing. I want to take advantage of PoorBoy's import script. I will use it as a vehicle in transferring the files from one server to the other. I love his approach, because it is lightning fast. In my estimates, I think the file have already in the other server, by the time the script finished writing it in the database. THAT IS FAST.

Some paid MoDs on PoorBoy side. After his encoder class mod, he is planning to have the DivX, MP4 options for encoding. The encoding commands were already been written in the encoding class script. His XAMPP demo site is already running this mod. There will be THREE options on which video is to be rendered on the viewers browser. The settings and controls of this mod is also integrated in the admin area.

Now the problems! When PoorBoy was writing most of his mods, it was on earlier version of vidiscript. I think he even have some mods on the version 0.33 platform. Most of his mods are based on the 0.42. I don't know how and when he is going to migrate them into the latest version.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)