Modal Box image not center

Phoca Gallery - image gallery extension
eikman2k
Phoca Newbie
Phoca Newbie
Posts: 7
Joined: 19 Feb 2009, 13:23

Modal Box image not center

Post 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
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 49297
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Modal Box image not center

Post 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
If you find Phoca extensions useful, please support the project
girathryn
Phoca Newbie
Phoca Newbie
Posts: 3
Joined: 12 May 2010, 03:28

Re: Modal Box image not center

Post 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.
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 49297
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Modal Box image not center

Post by Jan »

Did you try to check it with some standard template like rhuk milkyway is?
If you find Phoca extensions useful, please support the project
girathryn
Phoca Newbie
Phoca Newbie
Posts: 3
Joined: 12 May 2010, 03:28

Re: Modal Box image not center

Post 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!!
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 49297
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Modal Box image not center

Post 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. :-(
If you find Phoca extensions useful, please support the project
DVD
Phoca Newbie
Phoca Newbie
Posts: 6
Joined: 19 Oct 2010, 05:19

Re: Modal Box image not center

Post 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
imperialWicket
Phoca Enthusiast
Phoca Enthusiast
Posts: 78
Joined: 28 Feb 2010, 15:39

Re: Modal Box image not center

Post 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;".
girathryn
Phoca Newbie
Phoca Newbie
Posts: 3
Joined: 12 May 2010, 03:28

Re: Modal Box image not center

Post 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
DVD
Phoca Newbie
Phoca Newbie
Posts: 6
Joined: 19 Oct 2010, 05:19

Re: Modal Box image not center

Post by DVD »

Thank you ImperialWicket it worked hooray...... now for the size issue? emailed vodka is coming soon!
Post Reply