Howdy, Stranger!

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

API / opening multiple items from a single link

Nick,

Trying to set this up, and almost certainly doing it wrong. Btw, the double "#" are used to circumvent the crusty backend language which breaks if single # is used.

I just need to create a few text links throughout a page ("Gallery") to spark a gallery. Not sure how to create the proper url's, and wasn't sure what goes in the top href.

<a href='##' id='example-1'>Gallery</a>

$(document).ready(function() {
  $('##example-1').on('click', function(event) {
    // the page will scroll up without this
    event.preventDefault();

    // Fresco API code goes here
    Fresco.show(['"http://www.foo.com/library/images/foo.jpg"', '"http://www.foo.com/library/images/foo2.jpg"'], {
  thumbnails: false
});
});

Any help is appreciated!

Comments

  • edited March 9

    Think I got it... figured out I couldn't include the entire url within the Fresco.show code. I was able to do it with the path. Hopefully that's all I need!

  • Nick,

    Spoke too soon. It worked fine, until I tried to add the option for no thumbnails. It just jumped to the top of the screen.

        <script type='text/javascript'>
        $(document).ready(function() {
          $('##example-1').on('click', function(event) {
            // the page will scroll up without this
            event.preventDefault();
    
            // Fresco API code goes here
            Fresco.show(['/library/images/home/foo1.jpg', '/library/images/home/foo2.jpg'], {
               thumbnails: false
          });
        });
        </script>
    

    Thanks...

  • edited March 9

    Fixed. I checked your source code and discovered the additional

    });

    As I have more than per page, I repeated the entire code, and assigned a unique ID (assuming there's no other way). One question though, how to set ui: inside?

    Thanks!

  • Add a comma after thumbnails: false and put it in

  • Nick,

    Thx for the response. But is there some specific order for all of this? One too many brackets? Not enough? Wrong bracket? I've tried a variety of ways.

    <script type='text/javascript'>
          $(document).ready(function() {
           $('##example-8').on('click', function(event) {
              event.preventDefault();
    
              Fresco.show([
                { url: '/images/foo1.jpg', caption: 'Caption for this image' },
                { url: '/library/foo2.jpg', caption: 'Another caption' },
                { url: '/images/foo13.jpg', caption: 'Caption for this image' },    
                thumbnails: false,  
                 });
              ]);
            });
          });
        </script>
    
  • edited March 11
    $(document).ready(function() {
      $('#example-8').on('click', function(event) {
        event.preventDefault();
    
        Fresco.show([
            { url: '/images/foo1.jpg', caption: 'Caption for this image' },
            { url: '/library/foo2.jpg', caption: 'Another caption' },
            { url: '/images/foo13.jpg', caption: 'Caption for this image' }
          ],
          {
            thumbnails: false,
            ui: 'inside'
          }
        );
      });
    });
    

    I recommend using an editor like PhpStorm or WebStorm, it'll highlight basic syntax issues so you can avoid that. Also look into learning more about javascript Arrays and Objects, so you know what the different brackets mean.

  • edited March 11

    All good. The code was fine. It was the incorrect slash in the caption. It doesn't do well with apostrophes unless a backwards slash is inserted "world\'s".

Sign In or Register to comment.