How do I create a link to a pop up Advanced Custom Fields lighbox gallery?
I'm trying to create an Advanced Custom Fields gallery in a lightbox that pops up when an icon is clicked. I've got it to the point where the lightbox finds all the images associated with the post and displays them properly when you click the icon, but the problem I'm having is it's also showing multiple icons for the gallery as well.
Sample Image
I assume this is because I have the gallery icon as part of the foreach loop, but I have no idea how to separate it. One idea I had was to simply assign unique CSS classes to the extra icons and then hide them but I was hoping for something more elegant. Can someone point me in the right direction? The code I've cobbled together is below.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
wordpress gallery advanced-custom-fields
asked Nov 14 '18 at 21:37
JoeyJoey
83
add a comment |
I'm trying to create an Advanced Custom Fields gallery in a lightbox that pops up when an icon is clicked. I've got it to the point where the lightbox finds all the images associated with the post and displays them properly when you click the icon, but the problem I'm having is it's also showing multiple icons for the gallery as well.
Sample Image
I assume this is because I have the gallery icon as part of the foreach loop, but I have no idea how to separate it. One idea I had was to simply assign unique CSS classes to the extra icons and then hide them but I was hoping for something more elegant. Can someone point me in the right direction? The code I've cobbled together is below.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
wordpress gallery advanced-custom-fields
asked Nov 14 '18 at 21:37
JoeyJoey
83
Your question isn't clear, provide visual example like link or SS
– Ahmad Hassan
Nov 14 '18 at 21:49
Sorry about that. Site site is on a dev server but I was able to add a screenshot for reference. This shows two sample product rows where one product has a lightbox gallery with 4 images. The lightbox functionality itself works fine, but there should only be one icon for the gallery and when clicked it shows 4 images, not 4 icons that show the 4 images.
– Joey
Nov 15 '18 at 15:05
add a comment |
I'm trying to create an Advanced Custom Fields gallery in a lightbox that pops up when an icon is clicked. I've got it to the point where the lightbox finds all the images associated with the post and displays them properly when you click the icon, but the problem I'm having is it's also showing multiple icons for the gallery as well.
Sample Image
I assume this is because I have the gallery icon as part of the foreach loop, but I have no idea how to separate it. One idea I had was to simply assign unique CSS classes to the extra icons and then hide them but I was hoping for something more elegant. Can someone point me in the right direction? The code I've cobbled together is below.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
wordpress gallery advanced-custom-fields
asked Nov 14 '18 at 21:37
JoeyJoey
83
I'm trying to create an Advanced Custom Fields gallery in a lightbox that pops up when an icon is clicked. I've got it to the point where the lightbox finds all the images associated with the post and displays them properly when you click the icon, but the problem I'm having is it's also showing multiple icons for the gallery as well.
Sample Image
I assume this is because I have the gallery icon as part of the foreach loop, but I have no idea how to separate it. One idea I had was to simply assign unique CSS classes to the extra icons and then hide them but I was hoping for something more elegant. Can someone point me in the right direction? The code I've cobbled together is below.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
wordpress gallery advanced-custom-fields
wordpress gallery advanced-custom-fields
asked Nov 14 '18 at 21:37
JoeyJoey
83
asked Nov 14 '18 at 21:37
JoeyJoey
83
edited Nov 15 '18 at 15:03
Joey
asked Nov 14 '18 at 21:37
JoeyJoey
83
asked Nov 14 '18 at 21:37
JoeyJoey
83
asked Nov 14 '18 at 21:37
JoeyJoey
83
83
Your question isn't clear, provide visual example like link or SS
– Ahmad Hassan
Nov 14 '18 at 21:49
Sorry about that. Site site is on a dev server but I was able to add a screenshot for reference. This shows two sample product rows where one product has a lightbox gallery with 4 images. The lightbox functionality itself works fine, but there should only be one icon for the gallery and when clicked it shows 4 images, not 4 icons that show the 4 images.
– Joey
Nov 15 '18 at 15:05
add a comment |
Your question isn't clear, provide visual example like link or SS
– Ahmad Hassan
Nov 14 '18 at 21:49
Sorry about that. Site site is on a dev server but I was able to add a screenshot for reference. This shows two sample product rows where one product has a lightbox gallery with 4 images. The lightbox functionality itself works fine, but there should only be one icon for the gallery and when clicked it shows 4 images, not 4 icons that show the 4 images.
– Joey
Nov 15 '18 at 15:05
Your question isn't clear, provide visual example like link or SS
– Ahmad Hassan
Nov 14 '18 at 21:49
Your question isn't clear, provide visual example like link or SS
– Ahmad Hassan
Nov 14 '18 at 21:49
Sorry about that. Site site is on a dev server but I was able to add a screenshot for reference. This shows two sample product rows where one product has a lightbox gallery with 4 images. The lightbox functionality itself works fine, but there should only be one icon for the gallery and when clicked it shows 4 images, not 4 icons that show the 4 images.
– Joey
Nov 15 '18 at 15:05
Sorry about that. Site site is on a dev server but I was able to add a screenshot for reference. This shows two sample product rows where one product has a lightbox gallery with 4 images. The lightbox functionality itself works fine, but there should only be one icon for the gallery and when clicked it shows 4 images, not 4 icons that show the 4 images.
– Joey
Nov 15 '18 at 15:05
add a comment |
1 Answer
1
active
oldest
votes
Modify your loop as below, it will run img tag only when $i=0, means only first time.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
answered Nov 15 '18 at 21:43
Ahmad HassanAhmad Hassan
212112
Thanks. For some reason the above loop gives the error: Warning: Invalid argument supplied for foreach()
– Joey
Nov 16 '18 at 1:17
I updated answer, try that..
– Ahmad Hassan
Nov 16 '18 at 2:08
It seems to work perfectly. Thank you so much!
– Joey
Nov 16 '18 at 4:36
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53309094%2fhow-do-i-create-a-link-to-a-pop-up-advanced-custom-fields-lighbox-gallery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Modify your loop as below, it will run img tag only when $i=0, means only first time.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
answered Nov 15 '18 at 21:43
Ahmad HassanAhmad Hassan
212112
Thanks. For some reason the above loop gives the error: Warning: Invalid argument supplied for foreach()
– Joey
Nov 16 '18 at 1:17
I updated answer, try that..
– Ahmad Hassan
Nov 16 '18 at 2:08
It seems to work perfectly. Thank you so much!
– Joey
Nov 16 '18 at 4:36
add a comment |
Modify your loop as below, it will run img tag only when $i=0, means only first time.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
answered Nov 15 '18 at 21:43
Ahmad HassanAhmad Hassan
212112
Thanks. For some reason the above loop gives the error: Warning: Invalid argument supplied for foreach()
– Joey
Nov 16 '18 at 1:17
I updated answer, try that..
– Ahmad Hassan
Nov 16 '18 at 2:08
It seems to work perfectly. Thank you so much!
– Joey
Nov 16 '18 at 4:36
add a comment |
Modify your loop as below, it will run img tag only when $i=0, means only first time.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
answered Nov 15 '18 at 21:43
Ahmad HassanAhmad Hassan
212112
Modify your loop as below, it will run img tag only when $i=0, means only first time.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
answered Nov 15 '18 at 21:43
Ahmad HassanAhmad Hassan
212112
edited Nov 16 '18 at 2:07
answered Nov 15 '18 at 21:43
Ahmad HassanAhmad Hassan
212112
answered Nov 15 '18 at 21:43
Ahmad HassanAhmad Hassan
212112
answered Nov 15 '18 at 21:43
Ahmad HassanAhmad Hassan
212112
212112
Thanks. For some reason the above loop gives the error: Warning: Invalid argument supplied for foreach()
– Joey
Nov 16 '18 at 1:17
I updated answer, try that..
– Ahmad Hassan
Nov 16 '18 at 2:08
It seems to work perfectly. Thank you so much!
– Joey
Nov 16 '18 at 4:36
add a comment |
Thanks. For some reason the above loop gives the error: Warning: Invalid argument supplied for foreach()
– Joey
Nov 16 '18 at 1:17
I updated answer, try that..
– Ahmad Hassan
Nov 16 '18 at 2:08
It seems to work perfectly. Thank you so much!
– Joey
Nov 16 '18 at 4:36
Thanks. For some reason the above loop gives the error: Warning: Invalid argument supplied for foreach()
– Joey
Nov 16 '18 at 1:17
Thanks. For some reason the above loop gives the error: Warning: Invalid argument supplied for foreach()
– Joey
Nov 16 '18 at 1:17
I updated answer, try that..
– Ahmad Hassan
Nov 16 '18 at 2:08
I updated answer, try that..
– Ahmad Hassan
Nov 16 '18 at 2:08
It seems to work perfectly. Thank you so much!
– Joey
Nov 16 '18 at 4:36
It seems to work perfectly. Thank you so much!
– Joey
Nov 16 '18 at 4:36
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53309094%2fhow-do-i-create-a-link-to-a-pop-up-advanced-custom-fields-lighbox-gallery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your question isn't clear, provide visual example like link or SS
– Ahmad Hassan
Nov 14 '18 at 21:49
Sorry about that. Site site is on a dev server but I was able to add a screenshot for reference. This shows two sample product rows where one product has a lightbox gallery with 4 images. The lightbox functionality itself works fine, but there should only be one icon for the gallery and when clicked it shows 4 images, not 4 icons that show the 4 images.
– Joey
Nov 15 '18 at 15:05