Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Thanked 0 Times in 0 Posts

    Adding custom button and toolbars to PhotoSwipe

    I've posted this other places, emailed the developer, and no one has helped... hoping someone here can help.. thanks in advance!!

    I'm trying to use this code at the link below to customize Photoswipe so I can have a custom toolbar:

    Instead of the sayHiClickHandler function I started to replace it with a needed SEND button which will open up a external link - so that information on the specific project can be mailed directly to a client. This is something that will be used internally on company iPads to present projects to clients.

    You can see the site so far here: http://www.digitour360.com/freelon2/indexCUS.html
    Keep in mind the layout is designed to fit iPads only right now, not PCs, and each thumbnail will activate a seperate photo gallery.

    Note: Click the second thumbnail at the top, it is the only active one right now.

    The SEND button works on PCs, but this site is specifically for iPads right now, and when you touch the SEND button nothing happens. How can I fix this?

    Also, I need some sort of function that would allow me to have additional toolbars for each gallery, once those are active. You can see that it mentions Gallery2, I want gallery1, gallery3, gallery4, etc to each call different toolbars (getToolbar function has only 1, need additional toolbars for each gallery. I'm a beginner when it comes to javascript, so detailed code on how to accomplish this would be very helpful.

    Below is the current code that allows me to add a custom toolbar. Again I need to change this so I can call up different toolbars based on which gallery they are in, as well as, fix the issue with the SEND link not working.

    <script type="text/javascript">
    (function(window, Util, PhotoSwipe){
    document.addEventListener('DOMContentLoaded', function(){
    options = {
    getToolbar: function(){
    return '<div class="ps-toolbar-close" style="padding-top: 12px;">Close</div><div class="ps-toolbar-play" style="padding-top: 12px;">Play</div><div class="ps-toolbar-previous" style="padding-top: 12px;">Previous</div><div class="ps-toolbar-next" style="padding-top: 12px;">Next</div><a onclick="open_win()" style="padding-top: 12px;cursor:pointer">Send</a></div>';
    // NB. Calling PhotoSwipe.Toolbar.getToolbar() wil return the default toolbar HTML
    instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery2 a'), options );
    }(window, window.Code.Util, window.Code.PhotoSwipe));

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Thanked 1,007 Times in 1,004 Posts
    Since PhotoSwipe is for Mobile and Touch devices why not post to the section on mobile devices http://www.codingforums.com/forumdisplay.php?f=70

    But when the person that made the app can't or wont help, what chance do any of us have?


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts