I have a image gallery with 15 pics, it shows the first image in normal size and the rest are thumbs on the bottom, when you click the thumbs it replaces the normal size image with that one, and if you click the normal sized image it shows on a lightbox style popup with the image description.
This gallery layout is called Galleria and its part of the SIG Pro joomla plugin:
http://demo.joomlaworks.net/simple-image-gallery-pro
The image descriptions for each image are shown on the popup, but I would like to remove this behavior and show the description below the normal sized image.
My question is regarding PHP, I'm very noob at this.
For what I figured out I can print all the thumbs descriptions with this:
<?php foreach($gallery as $count=>$photo): ?>
<p class="sigProGalleriaTargetTxt"><?php echo $photo->captionDescription; ?></p>
<?php endforeach; ?>
But what I want to print is only the description of the image that is selected.
I tried this:
<p class="sigProGalleriaTargetTxt"><?php echo $gallery[0]->captionDescription; ?></p>
But this only prints the first image description, because it has the value 0 (first image).
I see that I need to increment the value of $gallery according to the selected image.
How can I achieve this?
Here is the complete php file:
http://codepad.org/MlPbgPzl
Thank you,
What about using som javascript/dom to set the captions? its a bit of a hacky but, i would try to have an onClick Event which calls a function to apply the description.
in the thumbs sections something like:
<span class="sigProLinkWrapper">
<a onClick="setDesc('<?php echo $photo->captionDescription; ?>');" href="...
and for the description:
// leaving the <?php tag like this, so you get always the first description
// but adding an id tag
<p id='photoDescription' class="sigProGalleriaTargetTxt">$gallery[0]->captionDescription; ?></p>
and finally replacing it with some javascript (or jquery if youre using that)
function setDesc(photoDesc)
{
var descContainer = document.getElementById("photoDescription").innerHTML= photoDesc;
}
maybe it helps :)
Related
I have created a repeater field called: "random_images".
It contains the subfields: "random photo one" (to five)
One random image at the time from these five should be displayed on my front-end. The images should change accordingly: When the page loads, one random image should be displayed. After a couple of seconds, the image should change to another.
How do I do it?
I am new to ACF and PHP. This is what I have come up with so far:
if (get_row_layout() == 'random_images') {
$rows = get_sub_field('random_images');
$rand_row_image = array_rand($random_images, 1);
$image = wp_get_attachment_image_src($rand_image, 'full');
}
I'm going to assume you have a repeater field called random_images that has a repeatable subfield (image field) called image, so, when you go to your post editor (or wherever you place the repeatable field), you can repeat the image field as many times as you want and put as many images as you want there.
Then, if you put your code in single.php (or you template parts or other template files), you can do this:
<?php
// ... template code already there
$random_images = get_field('random_images');
//The line below will mix the array randomly, so you always pick a random element from it
shuffle($random_images);
$random_img_url = $random_imges[0]['image']['url'];
?>
Note: How to get the URL might change depending on how you configured your fields when you created them, but that is the idea.
Note: If you want to use get_field() outside the loop, you are going to have to use the post id in this way get_field('random_images', $post_id);
The code above will give you one of the images you placed in the repeater field, so now you can render that image in you page or post, and the image will be different in every page load.
<img src="<?php echo $random_img_url; ?>" />
To this point, you used PHP to render a random image but with PHP you can't change the image after the page is loaded, so you will have to use jQuery for that (you can use vanilla JavaScript but to make things easy I will explain this with jQuery).
If you don't have a custom file to put JS code in the theme you are developing, then you will have to create a file called custom.js or whatever name you want to give it, and then enqueue that file with wp_enqueue_script. I will not explain more of this because it is not directly related to the question.
Now you have your custom.js file, but you will need a way to get the other image URLs from the page with your random images, so, to achieve that, you can do the following just where we left the php code above.
<?php
$rand_imgs_urls = [];
foreach($random_images as $image) {
$rand_imgs_urls[] = $image['image']['url'];
}
// Now, instead of the <img /> tag we used above, we will use this
?>
<div class="random-img" data-images="<?php echo json_encode($rand_imgs_urls); ?>">
<img src="<?php echo $rand_imgs_urls[0]; ?>" />
</div>
Once you rendered the image, now you can use jQuery to get the images placed in the data-images attribute of the div above, and change the image src every few seconds. So, in the custom.js file you can put something like this:
jQuery(document).ready(function($) {
var images = JSON.parse($('.random-img').data('images'));
var randomImage = images[Math.floor(Math.random()*images.length)];
setInterval(function(){ $('.random-img img').attr('src', randomImage); }, 5000);
});
With that you will have the image changing every 5 seconds.
I want to credit the author of a few the photos on my website in the title tag. I just added the fields in the admin sections using the instructions given here and this works fine.
Now i want to display that information in the title tag of a photo but that photo is set as a background image and therefor im not able to add a title tag to it and thus the info isnt showing. It is said as a background-image because it sometimes has an extra layer (partially) on top of it.
<figure
style="<?php echo "background-image:url('".$snakeImageUrl."'); background-size:cover;"; ?>"
title="<?php echo get_post_meta($post->ID, 'be_photographer_name', true); ?>
<?php echo get_post_meta($post->ID, 'be_photographer_url', true); ?>">
</figure>
How am i still be able to achieve this result?
I think you're going to have trouble here, I don't know of properties being able to be attached to content that's delivered via CSS which is what the style attribute within with figure selector is.
Can you edit the template? If so, why not have the image as a HTML image element and then use CSS and position:absolute on the content that you want placed over the background image?
I added in single.php the following code to preview in top of the post the featured image
<?php the_post_thumbnail('artist-top-thumb', array('class' => "img-responsive")); ?>
and now I want to wrap the image with the link of the original image, so when the user clicks on the image the lightbox will show the full image. I looked the half internet but I cant find a solution (or I searched with wrong terms :) )
How can I do that? Is it possible?
Thank you :)
not too sure what you mean by light box but to return the url and open in a new window:
<?php
$pic=wp_get_attachment_url( get_post_thumbnail_id($post->ID);
?>
<img src="<?php echo $pic;?>"
I am trying to create a function where the user can click an image and a bigger one will load in a small popup window. I already have the bigger image in the system so it merely needs to load the image but in a window the right size!
Any ideas how I can achieve this?
Thanks.
You might want to look into using one of many js lightbox solutions
http://leandrovieira.com/projects/jquery/lightbox/ for example
Look into window.open. That will let you open a new window of a specified height and width, you just need to do something like:
window.open("<?php echo $url; ?>", "_blank",
"height=<?php echo $height;?> width=<?php echo $width; ?>")
You can get the image size in PHP with getimagesize
I created a responsive javascript only lightbox (no jquery needed) where you can pass links to the bigger image. So your thumbnail HTML should look like this, where your thumbnail-picture goes into the src attribute and the link to the bigger picture goes into the data-jslghtbx attribute:
<img class="jslghtbx-thmb" src="img/lightbox/thumbnail-picture.jpg" alt="" data-jslghtbx="img/big-picture.jpg">
You can also use the gallery function via the data-jslghtbx-group attribute to show multiple pictures, but be sure to hide all image elements (except the thumbnail which triggers the lightbox) via display: none;. Visit github for full documentation. Hope this helps!
I have an interesting question, or atleast I think it is.
I have this website http://21-card-games.com/best/casino-reviews/casino-casino-titan.asp. You will see the image and below it the content.
Is it possible to combine the image with the text and left align the image and make the text flow next to the image.
The pages are all dynamically created, The content on the page is a variable that I import from a mysql db...
Here is some of the coding:
<div id="yui-main"><div class="yui-b"><?php echo $g_page_content2 ?><br />
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/standard_images_screenshot_1.php');?><?php echo $g_content_text1 ?>
<?php /* This is the second banner for this page */ include($_SERVER['DOCUMENT_ROOT'].'/includes/banners/'.$row_rs_settings['g_sites_affiliate_ads2'].'.php');?></div>
The $g_content_text1 is the variable that pulls in the text, and the '/includes/standard_images_screenshot_1.php' is the image. The include image file is part of a script that creates the image on the fly (imagick).
However this is more or less what I where thinking:
to create a regex that replaces the first occurance of <p> with this include($_SERVER['DOCUMENT_ROOT'].'/includes/banners/'.$row_rs_settings['g_sites_affiliate_ads2'].'.php' but I am not sure if the php will still execute if I do that...
Any ideas on how I can accomplish this would be appreciated.
I don't get it.
Why you want to create a regexp to let the text flow on the left of the image?
This is a css issue.
Just add float:left to the image.