Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

frescojs pro array show api

Hello guys :)

Im using frescojs to view my images in a sexy box.

It works very well.

Now i need to get the images from an Array, but i dont know how to use it.

My Array is prepared and looks like this

[0] image1.jpg
[1] image2.jpg
[2] image3.jpg

how can i put this array in the frescojs show field?


greet;s satinez

Comments

  • You could join the array items using something like php:

    Fresco.show(['<?= implode("', '", $array); ?>']);
  • edited December 2015
    Ok thx, and what i have to do, to add the caption: functionality?

    Fresco.show(['<?= implode("', '", $array); ?>'], caption:<?= $mycaption; ?>);
    Is this semi right?
  • edited December 2015
    The API docs show how to open a group with multiple captions under 'groups', you'll have to recreate that with php. You should probably use a for loop instead of implode to build it up line by line.

    http://frescojs.com/documentation/api
  • I'm trying to do something similar. Would you be able to post an example of your code? I'm a little confused on how to combine a php loop within the Fresco.show();
  • I was able to get this set up so I thought I'd share my code. I'm still new to this sort of thing so there might be better ways than what I did.

    This was built into WordPress using Advanced Custom Fields to allow for multiple galleries on a page. This was all placed inside a wp_query which is querying my custom post type, where the galleries are being created. Also, since WP uses jQuery.noConflict(), I used jQuery instead of $.

    <?php

    $galId = 'gal' . get_the_ID();

    ?>

    <div id="<?php echo $galId; ?>">
    <?php
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail();
    }
    ?>
    <h2 class="gallery-title"><?php the_title(); ?></h2>
    </div>

    <?php

    if( have_rows('gallery_images') ):

    $galArray = array();

    while ( have_rows('gallery_images') ) : the_row();

    $imgArray = array(
    'image' => '',
    'desc' => '',
    );

    //vars
    $image = get_sub_field('image');
    $desc = get_sub_field('description');

    $imgArray['image'] = $image['url'];
    $imgArray['desc'] = $desc;


    $galArray[] = $imgArray;

    ?>

    <?php endwhile; ?>

    <?php $imgCount = count($galArray); ?>

    <?php endif; ?>

    <script type="text/javascript">

    /* We are using the API so we can have one element opening multiple images.
    * http://www.frescojs.com/documentation/api *
    */
    jQuery( document ).ready(function( $ ) {

    $('#<?php echo $galId; ?>').bind('click', function() {
    Fresco.show([
    <?php
    for($i = 0; $i < $imgCount; $i++){
    echo '{ url:"' . $galArray[$i]['image'] . '", caption:"' . $galArray[$i]['desc'] . '"},';
    }
    ?>

    ]);
    });
    });

    </script>
    <!-- end of the loop -->
Sign In or Register to comment.