foreach($photos as $photo) {
$lastChild = "";
if( $count%3 == 0 && $count != 0 )
echo "</tr><tr>";
$count++;
?> <td>
<a href="<?php echo ($photo['source'])?>" title="<?php echo ($photo['name'])?>">
<img id="thumb" class="thumb" src="<?php echo ($photo['picture'])?>">
</a></td>
This is the script for draggable. Ive done this but it still does not work
only the first one
does the foreach loop affects?
$thumb.draggable({
revert: "invalid", // when not dropped, the item will revert back to its initial position
helper: "clone",
});
im unable to set ui-draggable to all the img src other than the first img.
any one can help?
Use
<img class="thumb" src="<?php echo ($photo['picture'])?>">
instead of
<img id="thumb" class="thumb" src="<?php echo ($photo['picture']); ?>" />
in your PHP and
$('.thumb').draggable({
instead of
$thumb.draggable({
in your jQuery. This should fix it.
If you absolutely need IDs on the images for any reason, make them unique like this:
<img id="thumb-<?php echo $count; ?>" class="thumb" src="<?php echo ($photo['picture'])?>">
Related
My current code:
<?php if($_images){?>
<?php $i=0; foreach($_images as $_image){ $i++; ?>
<?php if($i > 2) { ?>
<div class = "largePic">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(600,900); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" />
</div>
<?php } else { ?>
<div class = "smallPic">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(450,675); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" />
</div>
<?php } ?>
<?php } ?>
<?php } ?>
So this is obviously wrong since every time an image is echo'ed it's assigned to a different div (same name but different). Is it possible to assign echoes to certain div depending on the count?
For example, first two images will be assigned to the smallPic div, then the rest will be in the largePic div.
Process the images first (storing the HTML for each image in either an array or string) and then create the div elements- see example below. This will reduce the number of opening/closing tags immensely.
Also note that if the keys of the array are numeric then the following syntax can be used instead of creating an extra variable (i.e. $i) just to track the index (so as to avoid extra bookkeeping like incrementing the variable - one of the major benefits of foreach compared to a for statement).
foreach (array_expression as $key => $value)
statement 1
<?php
$largePic = '';
$smallPic = '';
if($_images){
foreach($_images as $i => $_image){
if($i > 2) {
$largePic .= '<img src="'.$this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(600,900).'" alt="'. $this->htmlEscape($_image->getLabel()). '" title="'. $this->htmlEscape($_image->getLabel()).'" />';
} else {
$smallPic .= '<img src="'. $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(450,675). '" alt="'. $this->htmlEscape($_image->getLabel()). '" title="'. $this->htmlEscape($_image->getLabel()). '" />';
}
}
} ?>
<div class = "largePic"><?php echo $largePic; ?></div>
<div class = "smallPic"><?php echo $smallPic; ?></div>
What you want is to first devide your array into two arrays and then foreach through both of them.
<?php
$largeImages = array();
$smallImages = array();
foreach ($_images as $k => $v) {
if ($k > 2) {
$largeImages[] = $v;
} else {
$smallImages[] = $v
}
}
?>
<div class = "largePic">
<?php foreach ($largeImages as $_image) { ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(600,900); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" />
<?php } ?>
</div>
<div class = "smallPic">
<?php foreach ($smallImages as $_image) { ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(450,675); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" />
<?php } ?>
</div>
I'm not in PHP but I'm quite sure for start you can loose those extensive open/close tags (<?php ?>) and replace it with only one at the start and the end. This is hardly readable.
Then, like in many server side scripts, what you need is some kind of buffer containing HTML which you will output at the end of loop. Because what you're doing now is outputting from inside the loop, this sending multiple DIVs to client.
Create largePic nad smallPic variables contianing DIVs HTML, and append HTML to it inside loop (instead outputing it to client like you do now). Then, after loop is finished, output those two variables to client.
I want to display tick image when click one color which is a background color.
My phtml coding is
<?php foreach($this->getSolidColors() as $key => $_solidColors) : ?>
<li id="font-colr-<?php echo $_solidColors['id'] ?>" onclick="selectcolor("<?php echo $_solidColors['id'] ?>");" data-id="<?php echo $_solidColors['id'] ?>" data-img="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>" class="cursor font-color" style="background: #<?php echo $_solidColors['hexa'] ?>" data-color="#<?php echo $_solidColors['hexa'] ?>">
<span class="sprite"></span>
<img id="tick" src="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>" width="80%" height="80%" style="display:none; padding-left:10px;">
</li>
<?php endforeach; ?>
function selectcolor() {
var id = jQuery('#font-colr').attr('data-id');
jQuery('#tick').css('display', 'block');
}
When I click particular color the tick image is displayed for the first color only but I want to get image for which color I clicked and if I select another color the previous tick mark should be disappeared.
The issue you have is that the id of 'tick' is repeated throughout your page, which is invalid as id must be unique. You should change that to a common class instead.
You should also use unobtrusive JS to attach your event handlers instead of the outdated on* event attributes. Try this:
<?php foreach($this->getSolidColors() as $key => $_solidColors) : ?>
<li class="cursor font-color" id="font-colr-<?php echo $_solidColors['id'] ?>" data-id="<?php echo $_solidColors['id'] ?>" data-img="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>" style="background: #<?php echo $_solidColors['hexa'] ?>" data-color="#<?php echo $_solidColors['hexa'] ?>">
<span class="sprite"></span>
<img class="tick" src="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>">
</li>
<?php endforeach; ?>
.tick {
width: 80%;
height: 80%
display: none;
padding-left: 10px;
}
$('li.font-color').click(function() {
var id = $(this).data('id'); // I presume you use this value somewhere in your code?
$(this).find('.tick').show();
});
IDs must be unique. In your loop, add a unique id for each tick:
<li id="font-colr-<?php echo $_solidColors['id'] ?>" onclick="selectcolor("<?php echo $_solidColors['id'] ?>");" data-id="<?php echo $_solidColors['id'] ?>" data-img="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>"
class="cursor font-color"
style="background: #<?php echo $_solidColors['hexa'] ?>"
data-color="#<?php echo $_solidColors['hexa'] ?>">
<span class="sprite"></span>
<img id="tick-<?php echo $_solidColors['id'] ?>" src="<?php echo $this->getSkinUrl('css/images/checked.png'); ?>" width="80%" height="80%" style="display:none; padding-left:10px;">
</li>
and in your selectColor where you pass the id, use it:
function selectcolor(id){
jQuery('#tick-'+id).css('display', 'block');
}
I'm new to PHP and I know this is an easy one but still can't find a solution.
I have an array that holds 4 different images and I want to echo the results
so my HTML looks like this:
<img src="<?php echo $results['image1']?>" >
<img src="<?php echo $results['image2']?>" >
<img src="<?php echo $results['image3']?>" >
<img src="<?php echo $results['image4']?>" >
But what if for example image4 is null? - i don't want to echo the whole
<img src> tag line
How can i do it?
Thanks?
Here is your work around example.
<?php
if(!empty($results['image1'])) echo '<img src="'.$results['image1'].'">';
if(!empty($results['image2'])) echo '<img src="'.$results['image2'].'">';
if(!empty($results['image3'])) echo '<img src="'.$results['image3'].'">';
if(!empty($results['image4'])) echo '<img src="'.$results['image4'].'">';
?>
try this code may it helps you. here i have check first if result not empty.
<?php if(isset($results['image1']) && !empty($results['image1'])){ ?><img src="<?php echo htmlspecialchars($results['image1']}; ?>" ><?php } ?>
<?php if(isset($results['image2']) && !empty($results['image2'])){ ?><img src="<?php echo htmlspecialchars($results['image2']}; ?>" ><?php } ?>
<?php if(isset($results['image3']) && !empty($results['image3'])){ ?><img src="<?php echo htmlspecialchars($results['image3']}; ?>" ><?php } ?>
<?php if(isset($results['image4']) && !empty($results['image4'])){ ?><img src="<?php echo htmlspecialchars($results['image4']}; ?>" ><?php } ?>
<?if(isset($results['image1']) && $results['image1'] != ""){?><img src="<?=$results['image1']?>" ><?}?>
With this you check it the image is set. Do that for each of your images and you should be fine.
The isset is not necessary, but some setups of php throw a warning without it. Thus it's better practice to use it.
If you don't want all the short-tags, do it like this:
if(isset($results['image1']) && $results['image1'] != ""){echo "<img src='{$results['image1']}' >"; }
That should be about the fanciest you can do. the "x{$variable}y" works like "x".$variable."y" but is easier to write/read, if you like it.
I can't seem to see a logical way to do this, I've tried many different functions, some of which i get blank page errors, other which it seems to work but just skips and goes to the else function everytime.
In a nutshell, I'm trying to have it so that certain logos will be displayed depending on the User Group ID.
At the moment the code below is producing a blank error page, and I can't see why.
Could anyone help me with this? Joomla 3.1 by the way.
<?php $user = JFactory::getUser();
$usergroup=$user->getAuthorisedGroups();
if ($usergroup == '10') : ?>
<a href="<?php echo JURI::root(); ?>" id="gkLogo">
<img src="/images/fordlogo.png" alt="<?php echo $this->API->getPageName(); ?>" />
</a>
<?php elseif ($usergroup == '7') : ?>
<a href="<?php echo JURI::root(); ?>" id="gkLogo">
<img src="/images/tescologo.png" alt="<?php echo $this->API->getPageName(); ?>" />
</a>
<?php else; ?>
<a href="<?php echo JURI::root(); ?>" id="gkLogo">
<img src="<?php echo $logo_image; ?>" alt="<?php echo $this->API->getPageName(); ?>" />
</a>
<?php endif; ?>
Try something like this,
$user = JFactory::getUser();
$usergroup = $user->getAuthorisedGroups();
if(in_array('10',$usergroup)){
echo '<a href="'.JURI::root().'" id="gkLogo">
<img src="/images/fordlogo.png" alt="'.$this->API->getPageName().'" />
</a>';
}elseif(in_array('7',$usergroup)){
echo '<a href="'.JURI::root().'" id="gkLogo">
<img src="/images/fordlogo.png" alt="'.$this->API->getPageName().'" />
</a>';
}else{
echo '<a href="'.JURI::root().'" id="gkLogo">
<img src="/images/fordlogo.png" alt="'.$this->API->getPageName().'" />
</a>';
}
Hope this will help you.
Consider the following :
$img_pathm = JURI::root().'images/properties/images/'.$this->datos->id.'/';
$peque_path = JURI::root().'images/properties/images/thumbs/'.$this->datos->id.'/';
$result = count($this->Images);
$resultf = $result-1;
while ($resultf>=0){ ?>
<span class="editlinktip hasTip" title="<?php echo $this->datos->image1;?>::
<img border="1" src="<?php echo $peque_path.$this->Images[$resultf]->name; ?>" name="imagelib" alt="<?php echo JText::_( 'No preview available'.$img_pathm ); ?>" width="206" height="100" />">
<img src="<?php echo $peque_path.$this->Images[$resultf]->name; ?>" alt="Additional image <?php echo $resultf+1 ?>" width="65px" height="50px"/></span> <?php
$resultf--; }
This currently prints images one after the other. All I need to do is to invert the order in which these images are printed to the user. I am not sure where, or how I would insert something similar to ORDER by in this code? Thanks in advance!
Just loop the other way:
$img_pathm = JURI::root().'images/properties/images/'.$this->datos->id.'/';
$peque_path = JURI::root().'images/properties/images/thumbs/'.$this->datos->id.'/';
$result = count($this->Images);
$resultf = 0;
while ($resultf<$result){ ?>
<span class="editlinktip hasTip" title="<?php echo $this->datos->image1;?>::
<img border="1" src="<?php echo $peque_path.$this->Images[$resultf]->name; ?>" name="imagelib" alt="<?php echo JText::_( 'No preview available'.$img_pathm ); ?>" width="206" height="100" />">
<img src="<?php echo $peque_path.$this->Images[$resultf]->name; ?>" alt="Additional image <?php echo $resultf+1 ?>" width="65px" height="50px"/></span> <?php
$resultf++; }
Maybe you can use array_reverse