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

    Cool pause play script for timed gallery

    I'd be so thankful if someone could help me here.

    I've installed a js as a gallery and been working on creating a pause/play feature to pause this timed gallery.

    I'm not able to pause play (I think it's a syntax error)

    Here's the script I was hoping would pause/play upon click

    <script type="text/javascript" xml:space="preserve"> var toggled=0; function togglePause() { (if toggled==0) { myGallery.clearTimer(); toggled=1; } else { myGallery.nextItem(); toggled=0; }; } </script>

    the script installed is smoothgallery from jondesign with mootools
    http://smoothgallery.jondesign.net/what/

  • #2
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Mada

    I have the same problem. I have looked through many posts on the smoothgallery forum but there was only one site worth looking at (and no help anywhere for pause/play code). If you haven't seen it it is at http://www.gingiskincare.com/

    Unfortunately, the site is complicated with two galleries, flash, and most html buried in php files. I have been in email corres with the owner of the site. He has helped a bit with the code, but most of it was written for him by a friend.

    I am playing with the code I got off the site (I have his permission to use whatever I want/need). But I just don't know enough about java to write my own. I have a gallery up and running - but that is it at the moment.

    RJ

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ditto RJ. The man from gini is very nice. But, I just want the pause/play function. I'm at a standstill. All over his site people are asking for this feature.

    I'm hoping he's taken this into account and will release a new version with to accompany mootools new upgraded version.

    I've gleemed some information off the site, but can't seem to get it to function.

    I've even tried to learn javascript LOL.

  • #4
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mada - got it to work after messing about for FOUR DAYS. The problem is that I do not know much javascript so have been just doing it by trial and error.

    I just got it to work a couple of hours ago and am still trying to work out how I did it.

    I will post the code I used as soon as I got something figured out. Give me a couple of hours

    RJ

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mada - give this code and the mini howto a try. Few points first.

    The main credit for the pause/play function should go to Joel Kurtz and Kevin Voigt in the design of the website at www.gingiskincare.com. Joel generously said I could use any code from his site I wanted.

    I don't know much about javascript. I got the pause function to work in my own site by trial and error using some of their code. Sorry, but the site is not yet available for public viewing, but the code below should get you started.

    I only use Linux and Firefox 3 on my PCs, so have no idea if this will work under Windows and IE. It should do with a bit of tweaking. Let me know!

    OK - here goes.

    1. REMEMBER TO MAKE BACKUP COPIES OF ANY FILE YOU ARE ABOUT TO CHANGE. YOU HAVE BEEN WARNED!

    2. Open whatever html page you want to start work with. Make sure the content of the header contains entries to at least your main css file, the three js script files below, and the gallery style sheet jd.gallery.cs:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Name of website etc</title>
    <link href="yourmaincssfile.css" rel="stylesheet" type="text/css" />
    <script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
    <script src="scripts/mootools.v1.11.ext.js" type="text/javascript"></script>	
    <script src="scripts/jd.gallery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
    </head>
    3. Make sure that you change the links correctly to reflect where you are holding the files (some people use the name scripts and some use js of course)

    4. Next, in the same file, make sure that you have a div for the gallery with correct links to a couple of images. You should already have something like this if you have a gallery running:
    Code:
    <div id="myGallery">
    <div class="imageElement">
    <h3>Heading</h3>
    <p>Sub-text</p>
    <a href="mypage1.html" title="open image" class="open"></a>
    <img src="photo1.jpg" alt="Description of photo" class="full" />
    </div>
    
    <div class="imageElement">
    <h3>Heading</h3>
    <p>Sub-text</p>
    <a href="mypage1.html" title="open image" class="open"></a>
    <img src="photo2.jpg" alt="Description of photo" class="full" />
    </div>
    
    <!-- Insert new div here *** as I explain in point 5. below -->
    
    </div>
    5. Now you need a div to describe the buttons and set up the default button. I have called the div ppButtons as shown below. Cut and paste this div IMMEDIATELY BELOW your last photo so that it is nested in the main gallery container. See the remark above ***

    Code:
    <div id="ppButtons"
              style="width: 80px;
                     height: 40px;
                     border: 0px;
                     position: absolute;
                     left: 300px;
                     bottom: 6px;
                     z-index: 11;" >
              <img id="pausebutton" src="images/buttons/Pause2.gif" onclick="PausePlayGallery()"
                   style="cursor: pointer;" />
    </div>
    6. Now you need the main script to pause and play. Remove any entry you already have to a short script for the gallery. It may say something like:
    Code:
    <script type="text/javascript">
    function startGallery() {
    var myGallery = new gallery($('myGallery'), {
    timed: true,
    showArrows: true,
    showCarousel: false,
    embedLinks: false
    });
    }
    window.addEvent('domready', startGallery);
    </script>
    Add the following code in its place in your html page after the ppbuttons div. Here you can make a few choices about how you want the gallery to display etc. I have not been able to get the left and right arrows to work when the pause/play is installed. The arrows work fine on their own with a timed or static display. But I found that when they are installed as well as the pause/play buttons everything breaks down. If you want to try them, change showArrows to true. However I suggest that you leave them switched off until you have the gallery playing and pausing correctly.

    Code:
    <script type="text/javascript">
      var myGallery;
      var isPaused = 0;
    	function startGallery() {
    		  myGallery = new gallery($('myGallery'), {
    			timed: true,
    			fadeDuration: 250,
    			delay: 9000,
    			showArrows: false,
    			showCarousel: false,
    
    
    			showInfopane: true,
    			defaultTransition: "fadebg"
    		});
    	}
    	window.onDomReady(startGallery);
    
        function selectGallery(ndx) {
        myGallery.goTo(ndx);
        myGallery.clearTimer();
        isPaused = 1;
        document.getElementById('pausebutton').src = 'images/buttons/Play2.gif';
      }
    
      function resumeGallery() {
        myGallery.prepareTimer();
        myGallery.doSlideShow();
      }
    
      function pauseGallery() {
        myGallery.clearTimer();
      }
    
      function PausePlayGallery() {
        if (isPaused == 0)
        {
        pauseGallery();
        isPaused = 1;
        document.getElementById('pausebutton').src = 'images/buttons/Play2.gif';
        }
      else
        {
        resumeGallery();
        isPaused = 0;
        document.getElementById('pausebutton').src = 'images/buttons/Pause2.gif';
        }
      }
    </script>
    
    <!-- 	There is a bug for IE6/7 fixed by "showCarousel: false". There is another bug with the "Show..." parameters fixed by CSS entry ".jdGallery a.open{position: absolute;}"
    -->
    7. OK - now you need a couple of buttons for the gallery. I have attached my own rather feeble efforts. I have made them as transparent gif files so they can sit on top of my photos. If you want them to sit in a coloured border, then obviously you can make them whatever colours you like and either gif or jpg will work. Make sure, again, that the links in the script above, point to the correct directories where the buttons are kept.

    8. Now save your html file and open your website's main css file. Add this code to the end of the file (by the way - you should already have something like this if you have a gallery running).

    Code:
    #myGallery
    {
    /* this gives the position and size of the gallery*/
    position:absolute;
    left:273px;
    top:162px;
    
    width: 647px !important;
    height: 196px !important;
    }
    9. Save the css file. Make a backup copy of the gallery css file: jd.gallery.css, just to be on the safe side. Open the jd.gallery.css file, delete the contents, and cut and paste the following code into the file:

    Code:
    #myGallery, #myGallerySet, #flickrGallery
    {
    /*
      width: 460px;
      height: 345px;
    */
      z-index:5;
      border: 0px solid #000;
    }
    
    #flickrGallery
    {
      width: 500px;  font-weight: bold;
      height: 334px;
    }
    
    #myGallery img.thumbnail, #myGallerySet img.thumbnail
    {
      display: none;
    }
    
    .jdGallery
    {
      overflow: hidden;
      position: relative;
    }
    
    .jdGallery img
    {
      border: 0;
      margin: 0;
    }
    
    .jdGallery .slideElement
    {
      width: 100&#37;;
      height: 100%;
      background-color: #000;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url('img/loading-bar-black.gif');
    }
    
    .jdGallery .loa#myGallery, #myGallerySet, #flickrGallery
    {
    /*
      width: 460px;
      height: 345px;
    */
      z-index:5;
      border: 0px solid #000;
    }
    
    #flickrGallery
    {
      width: 500px;  font-weight: bold;
      height: 334px;
    }
    
    #myGallery img.thumbnail, #myGallerySet img.thumbnail
    {
      display: none;
    }
    
    .jdGallery
    {
      overflow: hidden;
      position: relative;
    }
    
    .jdGallery img
    {
      border: 0;
      margin: 0;
    }
    
    .jdGallery .slideElement
    {
      width: 100%;
      height: 100%;
      background-color: #000;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url('img/loading-bar-black.gif');
    }
    
    .jdGallery .loadingElement
    {
    width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #000;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url('img/loading-bar-black.gif');
    }
    
    /* positioning/height of text bar along bottom of image */
    .jdGallery .slideInfoZone
    {
      position: absolute;
      z-index: 10;
      width: 100%;
      margin: 0px;
      left: 0;
      bottom: 0;
      height: 25px;
      background: #333;
      color: #fff;
      text-indent: 0;
      overflow: hidden;
    }
    
    * html .jdGallery .slideInfoZone
    {
      bottom: -1px;
    }
    
    /* slide header font size etc */
    .jdGallery .slideInfoZone h2
    {
      padding: 0;
      font-size: 18px;
      margin: 0;
      margin: 2px 5px;
      font-weight: bold;
      color: inherit;
    }
    
    /* slide sub-header font size etc */
    .jdGallery .slideInfoZone p
    {
      padding: 0;
      font-size: 1.0em; 
      font-weight: bold;
      margin: 5px 10px; 
      color: #eee;
    }
    
    .jdGallery a
    {
      font-size: 100%;
      text-decoration: none;
      color: inherit;
    }
    
    .jdGallery a.right, .jdGallery a.left
    {
      position: absolute;
      height: 99%;
      width: 25%;
      cursor: pointer;
      z-index:10;
      filter:alpha(opacity=20); /* used to be 100 */
      -moz-opacity:0.2; /* used to be 0.8 */
      -khtml-opacity: 0.2; /* used to be 0.8 */
      opacity: 0.2; /* used to be 0.4 */
    }
    
    * html .jdGallery a.right, * html .jdGallery a.left
    {
      filter:alpha(opacity=50); /* used to be 100 */
    }
    
    .jdGallery a.right:hover, .jdGallery a.left:hover
    {
      filter:alpha(opacity=80);
      -moz-opacity:0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;
    }
    
    .jdGallery a.left
    {
      left: 0;
      top: 0;
      background: url('img/fleche1.gif') no-repeat center left;
    }
    
    * html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
    
    .jdGallery a.right
    {
      right: 0;
      top: 0;
      background: url('img/fleche2.gif') no-repeat center right;
    }
    
    * html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }
    
    .jdGallery a.open
    {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    
    .withArrows a.open
    {
      position: absolute;
      top: 0;
      left: 18%; /* used to be 25% */
      height: 99%;
      width: 64%;   /* used to be 50%; */
      cursor: pointer;
      z-index: 10;
      background: none;
      -moz-opacity:0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;
    }
    
      /* next line sets up lightbulb if called.  Commented out because I don't want a lightbulb! */
    
    /* * html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
      filter:alpha(opacity=80); }*/ 
    
    .jdGallery a.open{position: absolute;}
    
    .jdGallery a.open:hover
    {
      cursor: pointer
    }
    dingElement
    {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #000;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url('img/loading-bar-black.gif');
    }
    10. This file is more or less the same as the one you have backed up, but I have added a few comments to help you find things you might want to understand or change.

    11. Save the file and try to open the html page in a browser. If you have got all your links pointing to the right files you should be pretty close to what I have. At least you have all the necessary code and can mess about with it until you get it right.

    Good luck and let me know how you get on!

    Richard
    Attached Images Attached Images   
    Last edited by arjay; 07-27-2008 at 09:27 AM.

  • #6
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I apologize for digging up an old thread, but this page is one of the top hits on google when I was trying to find out how to do this. Thank you to arjay for getting me most of the way there, but some minor modifications need to be made to be compatible with Smoothgallery 2.0, so if anyone is still working on this, hopefully I can save you some time:

    Follow arjay's instructions, but stick the ppbuttons div into the (By default) myGallerySet div, which is under the content div.

    My gallery initialization script is as follows:

    Code:
         <script type="text/javascript">
          var myGallery;
          var isPaused = 0;
          
    			window.addEvent('domready', function() { 
    				myGallerySet = new gallerySet($('myGallerySet'), {
    			timed: true,
    			fadeDuration: 250,
    			delay: 3000,
    			showArrows: false,
    			showCarousel: false,
    			showInfopane: true,
    			defaultTransition: "fadebg"
    				});
    			});
    	
    	  function selectGallery(ndx) {
        myGallerySet.goTo(ndx);
        myGallerySet.clearTimer();
        isPaused = 1;
        document.getElementById('pausebutton').src = '/pictures/playbutton.gif';
      }
    
      function resumeGallery() {
        myGallerySet.prepareTimer();
        myGallerySet.doSlideShow();
      }
    
      function pauseGallery() {
        myGallerySet.clearTimer();
      }
    
      function PausePlayGallery() {
        if (isPaused == 0)
        {
        pauseGallery();
        isPaused = 1;
        document.getElementById('pausebutton').src = '/pictures/playbutton.gif';
        }
      else
        {
        resumeGallery();
        isPaused = 0;
        document.getElementById('pausebutton').src = '/pictures/pausebutton.gif';
        }
      }
      
      if (document.images) {
        buttonload = new Image();
        buttonload.src = "/pictures/playbutton.gif";
        buttonload2 = new Image();
        buttonload2.src = "/pictures/pausebutton.gif";
    }
    </script>
    Note that I preloaded the button images at the bottom so that they are ready to be shown if someone clicks pause before the rest of the gallery has finished loading. Without doing that there can be quite a delay.

    The CSS Gallery code doesn't need to be changed, and for some reason I was having trouble using arjay's modified CSS, probably because it was from an old version of smoothgallery. YMMV
    SikesPCRepair.

    Also of note (I just got a chance to test it) is that showArrows and showCarousel can both be set to true with no ill effects (I've only tested it in chrome, and I know showCarousel = false was for IE6/7 compatibility, so again, YMMV) but it looks like a lot of things work better in 2.0.

    Thanks again, arjay!
    Last edited by WA; 03-03-2012 at 12:08 AM.


  •  

    Posting Permissions

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