Creating Lightbox Image Gallery from 2 custom fields

136 views
Skip to first unread message

DJK

unread,
May 13, 2010, 5:57:56 PM5/13/10
to Magic Fields
Hello,

I have two image fields, one for a thumb nail and the other for a
bigger image. What I want to do is have the smaller image appear on
the page as a thumbnail and the larger version open in a lightbox.
I've done this by creating an array of both fields but I can't get it
to quite work properly.

Here's the code:

<code> <?php
$projectThumbs = get_post_meta($post->ID, 'galleryThumb', false);
$projectThumbsBig = get_post_meta($post->ID, 'galleryThumbBig',
false);
if ($projectThumbs[0]==""){ ?>

<!-- If there are no custom fields, show nothing -->

<?php } else { ?>

<?php foreach($projectThumbs as $projectThumbs);
foreach($projectThumbsBig as $projectThumbsBig)
{
echo '<div class="featurette"><div class="featurethmbcontainer"><a
href="/wp-content/files_mf/'.$projectThumbsBig.'"rel="lightbox[1]"
title="'.get_the_title().'"><img src="/wp-content/files_mf/' .
$projectThumbs.'"'.'alt="'.get_the_title().'" width="194"
height="125" /></a></div></div>'; } ?>


<?php } ?></code>


For some reason I can only get it to cycle through one of the fields
properly. Either it returns a proper array of thumbnails and opens the
same big image in the lightbox for every thumb or the different thumbs
are showing up but the lightbox doesn't work.

Maybe there are some magic field functions that would make this
easier?

Thanks,

Darren

Hunk

unread,
May 13, 2010, 7:07:29 PM5/13/10
to Magic Fields
uses get('name_fiel'); this return the path of the image.

http://wiki.magicfields.org/doku.php?id=front-end_functions#get

DJK

unread,
May 13, 2010, 8:19:23 PM5/13/10
to Magic Fields
I'm getting close to what I need with the code I have above it just
doesn't cycle through the images properly. With the above code I'm
getting the same thumbnail repeating with a different lighbox larger
image. I am trying a different strategy now based on some code I got
through here.

<code>
<?php $fields = get_group('galleryThumbs',false);
foreach($fields as $field){ ?>
<a rel="shadowbox[1]" href="<?php echo $field['galleryThumbBig'][1]
['o'] ?>">
<img src="<?php echo $field['galleryThumb'][1]['o'] ?>" alt=""></a>
<?php } ?>

</code>

This is working pretty well, except that it is only returning the
first value of the 'galleryThumbBig' and 'galleryThumb' images. I'm
sure there is a way to get it to cycle through and show all values of
those fields but I haven't figured it out yet. Please let me know.
There must be a parameter.

Thanks for responding quickly to the original post. Thanks in advance
for helping me out with this.

-Darren

Hunk

unread,
May 13, 2010, 11:40:53 PM5/13/10
to Magic Fields
what the content of the array ?

pr($fields);

DJK

unread,
May 14, 2010, 2:02:50 AM5/14/10
to Magic Fields
Is that what you mean? sorry, I'm new to php


Array
(
[1] => Array
(
[mainThumb] => Array
(
[1] => Array
(
[t] =>
http://wordpress.darrenkennedy.com/wp-content/files_mf/th_30231e0ddbe8cc994d7a442b46069352_TAGemailBig1.jpg
[o] => http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailBig1.jpg
)

)

[galleryThumbBig] => Array
(
[1] => Array
(
[t] =>
http://wordpress.darrenkennedy.com/wp-content/files_mf/th_30231e0ddbe8cc994d7a442b46069352_TAGemailBig2.jpg
[o] => http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailBig2.jpg
)

[2] => Array
(
[t] =>
http://wordpress.darrenkennedy.com/wp-content/files_mf/th_30231e0ddbe8cc994d7a442b46069352_TAGemailBig3.jpg
[o] => http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailBig3.jpg
)

[3] => Array
(
[t] =>
http://wordpress.darrenkennedy.com/wp-content/files_mf/th_30231e0ddbe8cc994d7a442b46069352_TAGemailBig4.jpg
[o] => http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailBig4.jpg
)

)

[galleryThumb] => Array
(
[1] => Array
(
[t] =>
http://wordpress.darrenkennedy.com/wp-content/files_mf/th_7e33f640c950bb0e75b166bd61025112_TAGemailSmall2.jpg
[o] =>
http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailSmall2.jpg
)

[2] => Array
(
[t] =>
http://wordpress.darrenkennedy.com/wp-content/files_mf/th_7e33f640c950bb0e75b166bd61025112_TAGemailSmall3.jpg
[o] =>
http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailSmall3.jpg
)

[3] => Array
(
[t] =>
http://wordpress.darrenkennedy.com/wp-content/files_mf/th_7e33f640c950bb0e75b166bd61025112_TAGemailSmall4.jpg
[o] =>
http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailSmall4.jpg
)

)

)

)

Hunk

unread,
May 14, 2010, 12:39:54 PM5/14/10
to Magic Fields
try with this:

<?php
$fields = get_group('galleryThumbs',false);
foreach($fields as $field){
foreach($field['galleryThumbBig'] as $key = $value){
?>
<a rel="shadowbox[1]" href="<?php echo $field['galleryThumbBig']
[$key]['o'] ?>">
<img src="<?php echo $field['galleryThumb'][$key]['o'] ?>"
alt="">
</a>
<?php
}
}
?>


On May 14, 1:02 am, DJK <djameskenn...@gmail.com> wrote:
> Is that what you mean? sorry, I'm new to php
>
> Array
> (
>     [1] => Array
>         (
>             [mainThumb] => Array
>                 (
>                     [1] => Array
>                         (
>                             [t] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/th_30231e0ddbe...
>                             [o] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailBig1.jpg
>                         )
>
>                 )
>
>             [galleryThumbBig] => Array
>                 (
>                     [1] => Array
>                         (
>                             [t] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/th_30231e0ddbe...
>                             [o] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailBig2.jpg
>                         )
>
>                     [2] => Array
>                         (
>                             [t] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/th_30231e0ddbe...
>                             [o] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailBig3.jpg
>                         )
>
>                     [3] => Array
>                         (
>                             [t] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/th_30231e0ddbe...
>                             [o] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailBig4.jpg
>                         )
>
>                 )
>
>             [galleryThumb] => Array
>                 (
>                     [1] => Array
>                         (
>                             [t] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/th_7e33f640c95...
>                             [o] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailSmall2...
>                         )
>
>                     [2] => Array
>                         (
>                             [t] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/th_7e33f640c95...
>                             [o] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailSmall3...
>                         )
>
>                     [3] => Array
>                         (
>                             [t] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/th_7e33f640c95...
>                             [o] =>http://wordpress.darrenkennedy.com/wp-content/files_mf/TAGemailSmall4...

DJK

unread,
May 15, 2010, 7:16:33 AM5/15/10
to Magic Fields
Thank you.

I had to change one thing to get it to work.

I changed:

as $key = $value){

to:

as $key => $value){

It returned an "unexpected '=' when I first tried it.


I also got it to work using this strategy:

<?php $fields = getFieldOrder('galleryThumb',1);

foreach($fields as $field)
?>

<?php $fields = getFieldOrder('galleryThumbBig',1);

foreach($fields as $field)
{
echo '<<a href="'.get('galleryThumbBig',1,$field).'"
rel="shadowbox[1]"><img src="'.get('galleryThumb',1,$field).'"></a>';
} ?>

I first tried to combine the for each statements but this is what
worked.

Thanks,

-Darren
Message has been deleted

DJK

unread,
May 15, 2010, 8:22:54 AM5/15/10
to Magic Fields
It also spit out an error message if there is no images, which is
unfortunate.

It looks like I will have to try and wrap this in and if else.
Then I'll have to figure out why IE6 doesn't like my theme :(

-Darren
Reply all
Reply to author
Forward
0 new messages