I want to make one image active each when it is selected, but right now all items are active
<?php foreach($project_images as $image) {?>
<?php
if($image['project_image_name'] != '') {
$images = '<img src="'.base_url().'public/uploads/project_images/'.$image['project_category'].'/'.$image['project_id'].'/'.$image['project_image_name'].'" >';
} else {
$images = '<img src="'.base_url().'public/uploads/project_images/default/default-project-image.jpg'.'" ';
}
?>
<div class="carousel-item active">
<?php echo $images; ?>
</div>
<?php }?>
This sounds like a job for JavaScript, not PHP.
I'm assuming PHP doesn't know if the image is active or not, it just displays the image.
I'm assuming you want the image to be active when it's clicked. That's JavaScript.
Step 1: Don't make anything active.
Remove 'active' from the div.
<div class="carousel-item">
<?php echo $images; ?>
</div>
Step 2: Give each div a unique identifier so JavaScript knows what element you're referring to.
<?php
$id = 0;
foreach($project_images as $image) {
$id++;
?>
<?php
// .. code is the same
?>
<div id="carousel_<?php echo $id ?>" class="carousel-item">
<?php echo $images; ?>
</div>
<?php }?>
That should give each div a unique id.
Step 3: Create a JavaScript function that will toggle the 'active' class of the selected item.
Ex:
function ToggleClass(elemID){
// Get selected element
selElement = document.getElementById(elemID);
//Use selElement to change class. Code goes here
}
Step 4: Add the JavaScript function to the div.
Note the quotes -- use the double and singles as needed.
Ex:
<div id="carousel_<?php echo $id ?>" class="carousel-item active" onclick="ToggleClass('carousel_<?php echo $id ?>')">
<?php echo $images; ?>
</div>
Related
Hope you're well.
I have got the below code working as intended, but is there a way of ONLY showing the div 'listinggallery' if there are images returned?
At the moment, it works great if there are images in the listing, but if there are no images, then I have an empty styled div showing. Ideally I want create a rule to say "IF listingimage 'true' then show 'listinggallery'".
I have tried placing the 'listinggallery' div elsewhere within the code but just seems to crash my site, so hoping I can create a rule?
Kind regards,
Spencer
<div class="listinggallery">
<?php
//Get the images ids from the post_metadata
$images = acf_photo_gallery('gallery', $post->ID);
//Check if return array has anything in it
if( count($images) ):
//Cool, we got some data so now let's loop over it
foreach($images as $image):
$id = $image['id']; // The attachment id of the media
$full_image_url= $image['full_image_url']; //Full size image url
$full_image_url = acf_photo_gallery_resize_image($full_image_url, 1024, 768); //Resized size to 262px width by 160px height image url
$thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
$url= $image['url']; //Goto any link when clicked
$target= $image['target']; //Open normal or new tab
$alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
$class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
?>
<div class="listingimage">
<div class="thumbnail">
<?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
<a href="<?php echo $full_image_url; ?>" class="fancybox">
<img src="<?php echo $thumbnail_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
</a>
<?php if( !empty($url) ){ ?></a><?php } ?>
</div>
</div>
<?php endforeach; endif; ?>
</div>
If you move the creation of the <div> inside the block which decides if there is anything to display...
<?php
$images = acf_photo_gallery('gallery', $post->ID);
//Check if return array has anything in it
if( count($images) ):
// Output start of gallery div
?>
<div class="listinggallery">
<?php
//Cool, we got some data so now let's loop over it
foreach($images as $image):
// rest of code as it currently is
endforeach;
// Close of gallery div
?>
</div>
<?php
endif;
?>
I have a simple MySQL table that stores four fields - CATEGORY, TITLE, DESCRIPTION, IMAGE as well as a unique ID for each row.
I use ORDER BY CATEGORY to display all of them on the page through one query.
SELECT
RESOLUTIONS.CATEGORY,
RESOLUTIONS.ID,
RESOLUTIONS.TITLE,
RESOLUTIONS.DESCRIPTION,
RESOLUTIONS.IMAGE
FROM
RESOLUTIONS
ORDER BY
RESOLUTIONS.CATEGORY
I want to create a jump menu that will jump to the first row of each category on the page. Is this possible using php? I know how to create a jump menu that jumps to an ID anchor of a div, but how can I make a unique identifier (that I can jump to) inside the repeat region?
Here is the repeat code I have now...
<?php
while(!$DETAILS->atEnd()) {
?>
<div class="row g-my-10 g-color-black">
<?php if($DETAILS->getColumnVal("IMAGE")!= "") { ?>
<div class="col-md-9">
<h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
<?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<div class="col-md-3"><img src="images/<?php echo($DETAILS->getColumnVal("IMAGE")); ?>" class="img-fluid"></div>
<? } else { ?>
<div class="col-md-12">
<h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
<?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<?php } ?>
</div>
<?php
$DETAILS->moveNext();
}
$DETAILS->moveFirst(); //return RS to first record
?>
In each iteration check if the category is different than the one before and create an anchor.
<?php
// set any initial value that does not match an empty category (if you have them)
$lastCategory = false;
while(!$DETAILS->atEnd()) {
<div class="row g-my-10 g-color-black">
<?php
// this category is different than the last: create anchor
if ($lastCategory !== $DETAILS->getColumnVal("CATEGORY")) {
echo '<a name="category-' . $DETAILS->getColumnVal("CATEGORY") . '"></a>';
// set the compare-value to the current category
$lastCategory = $DETAILS->getColumnVal("CATEGORY");
}
?>
<?php if($DETAILS->getColumnVal("IMAGE")!= "") { ?>
<div class="col-md-9">
<h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
<?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<div class="col-md-3"><img src="images/<?php echo($DETAILS->getColumnVal("IMAGE")); ?>" class="img-fluid"></div>
<? } else { ?>
<div class="col-md-12">
<h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
<?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<?php } ?>
</div>
<?php
$DETAILS->moveNext();
}
$DETAILS->moveFirst(); //return RS to first record
?>
Note: You might have to put the anchor within the column or even the <h2>, depending on your grid system (is that bootstrap?). You maybe also want to refactor the generation of the title/description column, so you don't repeat yourself. Something like
<?php
if ($DETAILS->getColumnVal("IMAGE")!= "") {
$cols = '9';
} else {
$cols = '12';
}
?>
<div class="col-md-<?php echo $cols ?>">
<h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
<?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<?php
if ($DETAILS->getColumnVal("IMAGE")!= "") {
?>
<div class="col-md-3"><img src="images/<?php echo($DETAILS->getColumnVal("IMAGE")); ?>" class="img-fluid"></div>
<?php
}
?>
Also note that according to PSR-1 you should use either <?php or the echo shortcut <?= but not just <?
And I know it's a matter of personal choice and also depends on what your file mainly contains (HTML or PHP), but I personally prefer echoing HTML code snippets instead of opening and closing PHP tags, because I find it easier to read (there is also a very marginal performance advantage)
I have an array that displays images. I want to make each image clickable to display that specific image larger on an overlaying div.
Each image is displayed and has a different id which is being generated with this code:
<?php if (count($images) > 0) : ?>
<?php $i = 0; ?>
<?php foreach($images as $image) : ?>
<div class=" item" onclick="showOverlay()" id="<?= $i; ?>"><img class="photo" src="<?= $image; ?>"></div>
<?php $i++; ?>
<?php endforeach; ?>
The image in the overlaying div must now use the id value to determine which array item (image) to display.
This is my code that does not work.
<div class="overlay">
<?php
$dirname = "img/photos/$student/$entry/*.JPG";
$images = glob($dirname);
?>
<img src="<?= $images[$_POST['id']]; ?>">
I need to display 1 (first) image which path is saved in database like Img1.jpg;img2.jpg;, I tried to seperate each path by using explode, getting all the images as array but not able to pick single path-
<div class="col-sm-6 masonry-item">
<a href="<?php echo Url::to(['site/roompage']); ?>" class="product_item text-center">
<span class="product_photo bordered_wht_border">
<?php
foreach (explode(';',rtrim($row['images'],';'),1) as $key_img => $value_img)
{
?>
<?php echo Html::img('#backend/web'.'/'.$value_img);?>
<?php
}
?>
</span>
<span class="product_title"><?php echo $row['room_type']; ?></span>
<span class="product_price">Rs.<?php echo $row['rate']; ?></span>
</a>
</div>
<?php endforeach; ?>
<?php
// if you want only the first image is better
$my_image = explode(';',rtrim($row['images'],';'),1);
echo Html::img('#backend/web'.'/'.$my_image[0]);
}
?>
otherwise
<?php
// if you want all the image
foreach (explode(';',rtrim($row['images'],';')) as $key_img => $value_img)
{
echo Html::img('#backend/web'.'/'.$value_img);
}
?>
this because (explode(';',rtrim($row['images'],';'),1) return an array of two element (the first and the rest)
The src parameter, containing the backend alias, will be processed by Url::to()
Check the docs for details on Html::img()
I have a parent page that acts as menu for my portfolio.
It pulls in thumbnail images from the child pages which i have been able to accomplish with magic fields and some code. It dumps the images into a grid layout. The thumbnails are pulled into one container div like so:
div id="folio-content">
<div class="thumb-container">
<div class="thumb"><img src="/images/pic.jpg"/>
</div>JCPenny</div>
... </div>`
when the div gets filled up with 2 thumbnails I want to create a new container div and fill it with 2 images again and so on after 2 images.
So, if you had 4 images it would look like this.
<div id="folio-content"><!--/Main Container/-->
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>JCPenny</div>
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>Champ Car</div></div>
<div id="folio-content"><!--/Main Container/-->
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>JCPenny</div>
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>Champ Car</div></div>
this is the code I am using in my page.php file.
<?php get_header(); ?>
<div id="folio-content">
<?php
$projectpage = get_pages('child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
$count = 0;
foreach($projectpage as $page)
{
$content = $page->post_content;
if(!$content)
continue;
if ($count == 10) --- this is geting 10 images now, but I want to get them all.
break;
$count++;
$content = apply_filters('the_content', $content);
?>
<div class="thumb-container">
<div class="thumb"><a href="<?php echo get_permalink($page->ID); ?>"<?php echo get_image ("thumbnail",1,1,1,$page->ID);?></a>
</div><?php echo $page->post_title ?>
</div>
<?php
}
?>
</div><!--/close set!-->
</div>
also, how can I get ALL child pages? I have it set to 10 now with this if ($count == 10)
any help? thanks a ton again!!!!
I'm not familiar with "get_pages" but since Wordpress treats posts and pages in an identical manner you could use this.
$projectpage = get_posts('numberposts=-1&post_type=page&child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
The -1 removes the limit and gets ALL the specified pages.
I have cobbled together some code, that sort of sounds right but does not work at all! Which I am not surprised. But it is a starting point - please take a look at this code, maybe it is step in the right direction?
<?php
$projectpage = get_posts('numberposts=-1&post_type=page&child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
if (have_posts()) :
$i=0; // counter
while(get_posts()) : the_post();
if($i%2==0) { // if counter is multiple of 3, put an opening div ?>
<!-- <?php echo ($i+1).'-'; echo ($i+2); ?> -->
<div>
<?php } ?>
<div class="single_item">
<h2><?php the_title(); ?></h2>
</div>
<?php $i++;
if($i%2==0) { // if counter is multiple of 3, put an closing div ?>
</div>
<?php } ?>
<?php endwhile; ?>
<?php
if($i%2!=0) { // put closing div here if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>
<?php endif; ?>