Page 1 of 2

Modal Box image not center

Posted: 29 Mar 2010, 16:44
by eikman2k
I already have youtube Vids in ther Gallery, no props with them..

Using rockettheme Template Kinetic from last Month i think...


If i upload an image, put it in an Categorie using Modal Box the Picture is on the left not in center of the box....

what should i do?
here the default template php from /components/com_phocagallery/views/detail/tmpl/

Code: Select all

if ($this->tmpl['backbutton'] != '') {
	echo $this->tmpl['backbutton'];
}
$largeHeight = (int)$this->tmpl['largeheight'] + 6 ;

if (isset($this->item->extid) && $this->item->extid != '') {
	$correctImageRes = PhocaGalleryPicasa::correctSizeWithRate($this->item->extw, $this->item->exth, $this->tmpl['picasa_correct_width_l'], $this->tmpl['picasa_correct_height_l']);
	$imgLink	= JHTML::_( 'image', $this->item->extl, '', array('width' => $correctImageRes['width'], 'height' => $correctImageRes['height']));
} else {
	$imgLink		= JHTML::_( 'image.site', $this->item->linkthumbnailpath, '');
}

?><center style="padding-top:10px">
<table border="0" width="100%">
	<tr>
		<td colspan="6" align="center" valign="middle" height="<?php echo $largeHeight; ?>" >
			<div id="image-box" style="width:<?php echo $this->item->realimagewidth;?>px;"><a  href="#" onclick="<?php echo $this->tmpl['detailwindowclose']; ?>"><?php echo $imgLink; ?></a><?php
			
			$titleDesc = '';
			if ($this->tmpl['displaytitleindescription'] == 1) {
				$titleDesc .= $this->item->title;
				if ($this->item->description != '' && $titleDesc != '') {
					$titleDesc .= ' - ';
				}
			}
			
			// LIGHTBOX DESCRIPTION
			if ($this->tmpl['displaydescriptiondetail'] == 2 && (!empty($this->item->description) || !empty($titleDesc))){
				?>
				<div id="description-msg" style="background:<?php echo $this->tmpl['descriptionlightboxbgcolor'];?>"><div id="description-text" style="background:<?php echo $this->tmpl['descriptionlightboxbgcolor'];?>;color:<?php echo $this->tmpl['descriptionlightboxfontcolor'];?>;font-size:<?php echo $this->tmpl['descriptionlightboxfontsize'];?>px"><?php echo $titleDesc . $this->item->description;?></div></div>
				<?php
			}
		?></div>
		</td>
	</tr>
	
	<?php
	// STANDARD DESCRIPTION
	if ($this->tmpl['displaydescriptiondetail'] == 1) {
	
		?>
		<tr>
			<td colspan="6" align="left" valign="top" height="<?php echo $this->tmpl['descriptiondetailheight']; ?>">
				<div style="font-size:<?php echo $this->tmpl['fontsizedesc']; ?>px;height:<?php echo $this->tmpl['descriptiondetailheight']; ?>px;padding:0 20px 0 20px;color:<?php echo $this->tmpl['fontcolordesc']; ?>"><?php echo $titleDesc . $this->item->description ?></div>
			</td>
		</tr>
		<?php
	
	}

	if ($this->tmpl['detailbuttons'] == 1){
	
		?>
		<tr>
			<td align="left" width="30%" style="padding-left:48px"><?php echo $this->item->prevbutton ;?></td>
			<td align="center"><?php echo $this->item->slideshowbutton ;?></td>
			<td align="center"><?php echo str_replace("%onclickreload%", $this->tmpl['detailwindowreload'], $this->item->reloadbutton);?></td>
			<?php
			if ($this->tmpl['detailwindow'] == 4 || $this->tmpl['detailwindow'] == 5 || $this->tmpl['detailwindow'] == 7) {
			} else {	
				echo '<td align="center">' . str_replace("%onclickclose%", $this->tmpl['detailwindowclose'], $this->item->closebutton). '</td>';
			}
			?>
			
			
			<td align="right" width="30%" style="padding-right:48px"><?php echo $this->item->nextbutton ;?></td>
		</tr>
		<?php
	}
		?>	
</table>
</center>
<?php echo $this->loadTemplate('rating');
if ($this->tmpl['detailwindow'] == 7) {
	echo $this->tmpl['emt'];
}
and her the default_slideshow.php

Code: Select all

<?php defined('_JEXEC') or die('Restricted access');
echo '<div id="phocagallery">';
if ($this->tmpl['backbutton'] != '') {
	echo $this->tmpl['backbutton'];
}

echo '<center style="padding-top:10px;">'
.'<table border="0" width="100%">'
.'<tr>'
.'<td colspan="6" align="center" valign="middle" height="'.$this->tmpl['largeheight'].'"'
.' style="height:'.$this->tmpl['largeheight'].'px" >';

echo '<div id="image-box" style="width:'. $this->tmpl['largewidth'].'px;">'

//.'<a href="#" onclick="'.$this->tmpl['detailwindowclose'].'">'.$this->item->linkimage.'</a>';
.'<script type="text/javascript" style="padding:0;margin:0;">';			
if ( $this->tmpl['slideshowrandom'] == 1 ) {
	echo 'new fadeshow(fadeimages, '.$this->tmpl['largewidth'] .', '. $this->tmpl['largeheight'] .', 0, '. $this->tmpl['slideshowdelay'] .', '. $this->tmpl['slideshowpause'] .', \'R\')';		
} else {						
	echo 'new fadeshow(fadeimages, '.$this->tmpl['largewidth'] .', '. $this->tmpl['largeheight'] .', 0, '. $this->tmpl['slideshowdelay'] .', '. $this->tmpl['slideshowpause'] .')';		
}
echo '</script>';

echo '</div>';
echo '</td>'
.'</tr>';
		
echo '<tr>'
.'<td align="left" width="30%" style="padding-left:48px">'. $this->item->prevbutton .'</td>'
.'<td align="center">'. $this->item->slideshowbutton .'</td>'
.'<td align="center">'. str_replace("%onclickreload%", $this->tmpl['detailwindowreload'], $this->item->reloadbutton).'</td>';
if ($this->tmpl['detailwindow'] == 4 || $this->tmpl['detailwindow'] == 5 || $this->tmpl['detailwindow'] == 7) {
} else {
	echo '<td align="center">'. str_replace("%onclickclose%", $this->tmpl['detailwindowclose'], $this->item->closebutton).'</td>';
}
echo '<td align="right" width="30%" style="padding-right:48px">'. $this->item->nextbutton .'</td>'
.'</tr>'
.'</table>'
.'</center>';

if ($this->tmpl['detailwindow'] == 7) {
	echo $this->tmpl['emt'];
}
echo '</div>';
could anybody help me pls?

Using newest Version of Gallery

Re: Modal Box image not center

Posted: 01 Apr 2010, 14:51
by Jan
Hi, try to enable/disable different css on your site (e.g. with developer toolbar in firefox) to get information, if there is no css which can conflict this :idea:

Jan

Re: Modal Box image not center

Posted: 12 May 2010, 03:31
by girathryn
Hello!

I am having the same problem.

You can see the issue at http://thealternativebride.com/index.ph ... &Itemid=28

I recently upgraded to a newer Phoca Gallery. Not sure if that is the problem. It didn't do that before!

You will see that the descriptions are centered but the image is not.

Can you help?

Thanks for a great component.

Re: Modal Box image not center

Posted: 12 May 2010, 16:36
by Jan
Did you try to check it with some standard template like rhuk milkyway is?

Re: Modal Box image not center

Posted: 13 May 2010, 21:41
by girathryn
Hmm... that does fix it when I use rhuk milkyway. Do you have any idea what code I need to edit to get it to work properly with my template?

Thanks for your help!!

Re: Modal Box image not center

Posted: 14 May 2010, 13:20
by Jan
Hi, this is very difficult, you need to compare your template with the standard and try to remove/add pieces of code step by step to get the place where the problem can be locaded. :-(

Re: Modal Box image not center

Posted: 23 Oct 2010, 10:14
by DVD
I have a similar problem although mine is self inflicted. my light box also loads image to align with left of page and I would like it centered, also the box is too big if any body has a suggestion I will email you a bottle of vodka!
Thanks in advance :twisted:
here is a link to the offending code: http://www.madeinhemp.com.au/about/ingredients

Re: Modal Box image not center

Posted: 23 Oct 2010, 13:38
by imperialWicket
Have you tried changing the directive in /components/com_phocagallery/assets/js/jak/lightbox-vertical.css
for ".lightbox .image-browser-image"? I would recommend removing the "float: left;".

Re: Modal Box image not center

Posted: 23 Oct 2010, 16:31
by girathryn
Hey there,

I was having the same issue and I just upgraded from 2.7.3 to 2.7.5 and it's fixed! Yay!

~Kathryn

Re: Modal Box image not center

Posted: 24 Oct 2010, 06:05
by DVD
Thank you ImperialWicket it worked hooray...... now for the size issue? emailed vodka is coming soon!