Fancybox for the second gallery group displaying only one image

0 Views

Ok so here’s the thing I have two galleries and two rel groups. The first gallery (group1) opens well and shows all the images present in the fancy box. However the second gallery(group2) opens up but displays only one image when there are 5 images in the set. 

 <div class="col-md-2 col-sm-3 pd0 width33 bdr_phmnsgg" style="margin-left:20px;">
 <span class="font14 photo_menu_heading pd_top10 pd_bot10 dsp_block">
 Photo Gallery
 </span>
 <?php $items = get_post_meta($post->ID, 'g_tourism_gimage', false); 
 $i=0;
 ?>
 <?php foreach ( $items as $item) { 
 if($i==0){
 ?>
 <a  href="<?php echo wp_get_attachment_url( $item,'full' ); ?>" class="grouped_elements" rel="group1" >
 <?php echo wp_get_attachment_image( $item); ?>
 </a>
 <?php }else{
 ?>
 <a href="<?php echo wp_get_attachment_url( $item,'full' ); ?>" style="display:none;" class="grouped_elements" rel="group1" >
 <?php echo wp_get_attachment_image( $item ); ?>
 </a>
 <?php } $i++;

 } ?>
 </div>
 <div class="col-md-2 col-sm-3 pd0 width33 mrgn_btm10 bdr_phmnsgg1" style="margin-left:20px; margin-right:20px;">
 <span class="font14 photo_menu_heading pd_bot10 pd_top10 dsp_block">Menu</span>
 <?php $menus = get_post_meta($post->ID, 'goan_tourism_menuimage', true); 
 ?>

 <a href="<?php echo wp_get_attachment_url( $menus,'full' ); ?>" class="grouped_elements fancybox" rel="group2"><?php echo wp_get_attachment_image( $menus); ?></a>
 </div>

And below is the jquery declaration:

Read More
<script>
$("a.grouped_elements").fancybox();
</script>

This is the edited code: Sorry for the delay was just checking how I had done it earlier 

  <div class="col-md-2 col-sm-3 pd0 width33 mrgn_btm10 bdr_phmnsgg1">
  <span class="font14 photo_menu_heading pd_top10 pd_bot10 dsp_block">
 Menu
 </span>
 <?php $items = get_post_meta($post->ID, 'goan_tourism_menuimage', true); 
 $j=0;
 ?>
 <?php foreach ( $menus as $menu) { 
 if($j==0){
 ?>
 <a  href="<?php echo wp_get_attachment_url( $menu,'full' ); ?>" class="grouped_elements fancybox" id="group2" rel="group2" >
 <?php echo wp_get_attachment_image( $menu); ?>
 </a>
 <?php }else{
 ?>
 <a href="<?php echo wp_get_attachment_url( $menu,'full' ); ?>" style="display:none;" id="group2" class="grouped_elements fancybox" id="group2" rel="group2" >
 <?php echo wp_get_attachment_image( $menu ); ?>
 </a>
 <?php } $j++;

 } ?>
 </div>
Post Views: 0

Related posts

1 comment

  1. Looks like you’re not looping over that second link, so you’re actually only outputting one image. You’ll need to add another foreach into your code.

    You might be better off not targetting the a tag and just using the fancybox class like so…

    <a  href="<?php echo wp_get_attachment_url( $item,'full' ); ?>" class="grouped_elements fancybox" rel="group1">

    and

    <a  href="<?php echo wp_get_attachment_url( $menus,'full' ); ?>"class="grouped_elements fancybox" rel="group2">

    And then call Fancybox like so

    <script>
    jQuery(".fancybox").fancybox();
</script>

    Full edited code below

     <div class="col-md-2 col-sm-3 pd0 width33 bdr_phmnsgg" style="margin-left:20px;">
<span class="font14 photo_menu_heading pd_top10 pd_bot10 dsp_block">Photo Gallery</span>

 <?php 
    $items = get_post_meta($post->ID, 'g_tourism_gimage', false); 
    $i=0;
 ?>
<?php foreach ( $items as $item) { 
    if($i==0){
?>
    <a href="<?php echo wp_get_attachment_url( $item,'full' ); ?>" class="grouped_elements fancybox" rel="group1"><?php echo wp_get_attachment_image( $item); ?></a>
<?php } else { ?>
    <a href="<?php echo wp_get_attachment_url( $item,'full' ); ?>" style="display:none;" class="grouped_elements fancybox" rel="group1"><?php echo wp_get_attachment_image( $item ); ?></a>
<?php } $i++;
 }
?>
 </div>

 <div class="col-md-2 col-sm-3 pd0 width33 mrgn_btm10 bdr_phmnsgg1" style="margin-left:20px; margin-right:20px;">
     <span class="font14 photo_menu_heading pd_bot10 pd_top10 dsp_block">Menu</span>
        <?php $menus = get_post_meta($post->ID, 'goan_tourism_menuimage', true); 

foreach ( $menus as $menu) { ?>
            <a href="<?php echo wp_get_attachment_url( $menu,'full' ); ?>" class="grouped_elements fancybox" rel="group2"><?php echo wp_get_attachment_image( $menu); ?></a>
<?php } ?>
 </div>

<script>
    jQuery(".fancybox").fancybox();
</script>

    Looks like you’re also missing a space before your class attribute in your second link, update to below.

    <a href="<?php echo wp_get_attachment_url( $menus,'full' ); ?>" class="grouped_elements fancybox" rel="group2"><?php echo wp_get_attachment_image( $menus); ?></a>

Comments are closed.