Recent Topics

Hack to add Zoom Function

Started by on Jul 31, 2006 – Contents updated: Jul 31, 2006

Jul 31, 2006 00:31    

Tested on B2evo 1.8.

Based on "Photo Zoom" from http://randsco.com/index.php/2005/04/23/photo_zoom_b2evo_how_to
I've done this hack.

This hack add a "Zoom" Button in the FileManager and then add the capability to insert an image with the zoom function in your post.

First, add these lines at the end of your CSS file :


/* beg Kimler Photo-Caption Zoom */                          

.Zright { float:right; margin:5px 0px 2px 10px; }		
.Zleft  { float: left; margin:5px 10px 2px 0px; } 		

.Zoom img { border: 1px solid #369; }				
.Zoom.t100 img  { width:100px; }				
.Zoom.t150 img  { width:150px; }				
.Zoom.t200 img  { width:200px; }				
.Zoom.t250 img  { width:250px; }				
.Zoom.t300 img  { width:300px; }				
.Zoom.t350 img  { width:350px; }				
.Zoom.t400 img  { width:400px; }				
.Zoom t450 img  { width:450px; }				
.Zoom.t500 img  { width:500px; }				
.Zoom.t550 img  { width:550px; }				
.Zoom.t600 img  { width:600px; }				

.Zoom .caption { display:none; }		    		

.Zoom a { padding:0; }					          
.Zoom a:hover { padding:0; border:none;                           
     margin:0; } /*  IE picky here  */	  
.Zoom a:visited { padding:0px;                                    
     text-deocoration:none; }	          

.w100 a:hover img,.w100 a:hover .caption {width:100px}	        
.w150 a:hover img,.w150 a:hover .caption {width:150px}		
.w200 a:hover img,.w200 a:hover .caption {width:200px}		
.w250 a:hover img,.w250 a:hover .caption {width:250px}		
.w300 a:hover img,.w300 a:hover .caption {width:300px}		
.w350 a:hover img,.w350 a:hover .caption {width:350px}		
.w400 a:hover img,.w400 a:hover .caption {width:400px}		
.w450 a:hover img,.w450 a:hover .caption {width:450px}		
.w500 a:hover img,.w500 a:hover .caption {width:500px}		
.w550 a:hover img,.w550 a:hover .caption {width:550px}		
.w600 a:hover img,.w600 a:hover .caption {width:600px}		

.Zoom a:hover img { margin-bottom:5px;}				
.Zoom a:hover .caption { 					
     display:block;			
     background:#eef;			
     border:1px solid #339;		
     font-family:verdana,sans-serif;	
     text-decoration:none;		
     text-align:justify;		
     font-size:10pt;			
     color:#339; }			

.Zoom a:hover .inner {					
     display:block;			
     padding:5px 8px; }                
     /* no IEboxModelHack */	        

/* end Kimler Photo-Caption Zoom */

in the file "blogs\inc\VIEW\files\_files_browse.inc.php", after :



/**
 * Insert IMG tags into parent window for selected files:
 */
function insert_tag_for_selected_files()
{
	var elems = document.getElementsByName( 'fm_selected[]' );
	var snippet = '';
	for( i = 0; i < elems.length; i++ )
	{
		if( elems[i].checked )
		{
			id = elems[i].id.substring( elems[i].id.lastIndexOf('_')+1, elems[i].id.length );
			img_tag_info_field = document.getElementById( 'img_tag_'+id );
			snippet += img_tag_info_field.value + ' ';
		}
	}
	if( ! snippet.length )
	{
		alert( '<?php echo TS_('You must select at least one file!') ?>' );
		return false;
	}
	else
	{
		if (! (window.focus && window.opener))
		{
			return true;
		}
		window.opener.focus();
		textarea_replace_selection( window.opener.document.item_checkchanges.itemform_post_content, snippet, window.opener.document );
		return true;
	}
}

Add :


/**
 * Insert ZOOM tags into parent window for selected files:
 */
function insert_zoom_for_selected_files()
{
  var elems = document.getElementsByName( 'fm_selected[]' );
  var snippet = '';
  for( i = 0; i < elems.length; i++ )
  {
	if( elems[i].checked )
	{
		id = elems[i].id.substring( elems[i].id.lastIndexOf('_')+1, elems[i].id.length );
		img_zoom_info_field = document.getElementById( 'img_zoom_'+id );
		snippet += img_zoom_info_field.value + ' ';
	}
  }
  if( ! snippet.length )
  {
	alert( '<?php echo TS_('You must select at least one file!') ?>' );
	return false;
  }
  else
  {
	if (! (window.focus && window.opener))
	{
		return true;
	}
	window.opener.focus();
	textarea_replace_selection( window.opener.document.item_checkchanges.itemform_post_content, snippet, window.opener.document );
	return true;
  }
}

Find :


if( $mode == 'upload' )
	{	// This mode allows to insert img tags into the post...
		// Hidden info used by Javascript:
		echo '<input type="hidden" name="img_tag_'.$countFiles.'" id="img_tag_'.$countFiles
		    .'" value="'.format_to_output( $lFile->get_tag(), 'formvalue' ).'" />';
	}

Replace by :


if( $mode == 'upload' )
	{	// This mode allows to insert img tags into the post...
		// Hidden info used by Javascript:
		echo '<input type="hidden" name="img_tag_'.$countFiles.'" id="img_tag_'.$countFiles
		    .'" value="'.format_to_output( $lFile->get_tag(), 'formvalue' ).'" />';
    echo '<input type="hidden" name="img_zoom_'.$countFiles.'" id="img_zoom_'.$countFiles
		    .'" value="'.format_to_output( $lFile->get_zoom(), 'formvalue' ).'" />';
	}

Find :


if( $mode == 'upload' )
		{	// We are uploading in a popup opened by an edit screen
			?>
			<input class="ActionButton"
				title="<?php echo T_('Insert IMG tags for selected files'); ?>"
				name="actionArray[img_tag]"
				value="img"
				type="submit"
				onclick="insert_tag_for_selected_files(); return false;" />
			<?php
			
		}

Replace by :


if( $mode == 'upload' )
		{	// We are uploading in a popup opened by an edit screen
			?>
			<input class="ActionButton"
				title="<?php echo T_('Insert IMG tags for selected files'); ?>"
				name="actionArray[img_tag]"
				value="img"
				type="submit"
				onclick="insert_tag_for_selected_files(); return false;" />
			<?php
			
			?>
			<input class="ActionButton"
				title="Use Zoom Function"
				name="Zoom"
				value="Zoom"
				type="submit"
				onclick="insert_zoom_for_selected_files(); return false;" />
			<?php
		}

Now, in the File Manager, you will have an extra "Zoom" Button

;)

Sep 17, 2006 04:01

Hi Totof,

Great work, I was looking for something like this. One question though, does this work with PZ3? I can't seem to get it to work.

Thanks,
Jason

Sep 17, 2006 04:14

totof, File::get_zoom() seems to be missing in your hack instructions.

Sep 17, 2006 04:56

I noticed that was missing as well, but I thought it was because I was using PZ3 (photo zoom 3). Looks like i'm not the only one.

Sep 19, 2006 20:14

So After some digging around I figured it out. You have to create the get_zoom function in the file inc/MODEL/files/_file.class.php.

Here's what I added after the ge_tag function (around line 880). It was really late when i did this so the code my be a little ugly, but I'm pretty sure it works.



/**
	 * IMG ZOOM Function
	 */
	function get_zoom( $before_image = '<div class="PZ3zoom PZ3-l Bdr Cap Lnk" style="width:150px; height:120px;"><a href="#" onclick="return false">',
	                  $before_image_legend = '<div class="image_legend">',
	                  $after_image_legend = '</div>',
	                  $after_image = '</div>' )
	{
		if( $this->is_dir() )
		{	// We can't reference a directory
			return '';
		}

		$this->load_meta();

		if( $this->is_image() )
		{ // Make an IMG link:
			$r = $before_image
						.'<img src="'.$this->get_url().'" '
						.'alt="'.$this->dget('alt', 'htmlattr').'" '
						.'title="'.$this->dget('title', 'htmlattr').'" '
						.'/>';
			$desc = $this->dget('desc');
			if( !empty($desc) )
			{
				$r .= '<span class="PZ3cap" style="width:300px;">"'.$this->dget('desc', htmlattr).'"</span></a></div>';	
							
			}
			$r .= $after_image;
		}
		else
		{	// Make an A HREF link:
			$r = '<a href="'.$this->get_url()
						.'" title="'.$this->dget('desc', 'htmlattr').'">'
						.$this->dget('title').'</a>';
		}

		return $r;
		}

Hope this helps.

Oct 01, 2006 22:02

thenicos wrote:

So After some digging around I figured it out. You have to create the get_zoom function in the file inc/MODEL/files/_file.class.php.

Hope this helps.

Hi,

:oops: :oops: Very sorry to have forgotten this part of the hack :oops: :oops: .

Thanks to thenicos to have post a solution

I just install the hack on the version 1.8.2 and it works fine (like in 1.8)

Best regards.


Form is loading...

CMS + forums – This forum is powered by b2evolution CMS, a complete engine for your website.