What can we do to make it easier to design with Wild Apricot?

Help with a slideshow

Hello,

First post to the forum. I was wondering if anyone had a nice program to use to integrate an EASY to use slideslow into my webpage that flips through a few photos or figures. I tried using Picasa to do the HTML code but I am not sure where the photos need to be and how I then tweak the code.

Thanks for your help

Mark

0 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

    Mark9992Mark9992 shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    10 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Colton3310Colton3310 commented  ·   ·  Flag as inappropriate

        Yes, there is. The Kvisoft Photo Slideshow Creator is a good program to make slideshows for your webpage. It has no any code requirements.

      • Larry KillerLarry Killer commented  ·   ·  Flag as inappropriate

        Rob,

        Thanks for replying and sorry it took so long to get back to you. I actually found a slideshow on JavaScriptKit.com called TransitionShow that I was able to get working. Well, it appears to be working currently on everything except IE 9 so I still have some tweaking to do, but at least I have it working on the majority of browsers!

        I also intend on spending a little time at the w3schools and htmldog sites to get myself better educated with javascript.

        Thanks again for all of your help!

      • RCBullarRCBullar commented  ·   ·  Flag as inappropriate

        Well ... Sparnfarkel.

        Okay, you've caught me on a deadline for the "real" job so I'm going to be real brief and let you know how I would chase it.
        * Go and grab our .js files and compare them with yours to see if something jumps out at you. No need to compare slideshow.js -- it's verbatim from the BarelyFitz site. But take a look at either:
        * http://denverhighland.org/resources/scripts/header_sm_1.js scripts/header_sm_1.js
        * http://denverhighland.org/resources/scripts/business_1.js scripts/business_1.js http://denverhighland.org/resources/scripts/business_1.js
        * http://denverhighland.org/resources/scripts/business_2.js scripts/business_2.js http://denverhighland.org/resources/scripts/business_2.js
        (We actually have three slideshows running on every page, but don't look at the code that places the "business" shows -- it is complex given we dynamically alter the page layout with javascript to place these shows under the menu,)
        * Go grab our Global javascript file from its backup at http://denverhighland.org/resources/Archive/Global Javascript/20120510.txt . Inspect the section beginning with the comment <!-- Scripts for the rotating images -->. Compare it to your code in the raw headers of your page.
        * Go grab the HTML source for our homepage at http://denverhighland.org , and search for the code that places our slideshow in the header by searching on SLIDES1. (That's the name of the show we place in our header. SLIDES2 and SLIDES3 are the shows in our left margin.) >> I also removed the <!-- and //--> to make the bottom portion of that code active. Should I have done that? <<

        Regarding the above, take a look at http://w3schools.com/js/js_howto.asp , and search on the header "Some Browsers do Not Support JavaScript." (The w3schools website, by the way, is my goto reference for all things web. I also use http://htmldog.com a lot.)

        One other hint: create a totally blank page on your site to play with getting the show working. I got everything working on a page that had absolutely nothing else on it, and then I transferred what I had learned to the header and footer, which was a bit more -- challenging.

        Finally, send me your site's URL. If I get a moment I'll take a look, but I can't make any promises given my weekend looks to be dominated by the great outdoors. (In other words, yardwork.)

        Rob

      • RCBullarRCBullar commented  ·   ·  Flag as inappropriate

        Larry,

        The bulk of the javascripts actually need to be in places other than the page body itself. Here's how we have it broken down: I created a folder in File management called "scripts." In that folder I placed: slideshow.js (contains the "slide" and "slideshow" objects used by all other scripts to create the show.) <slideshow_name>.js, in our case header_sm_1.js. This is the script that creates the slideshow.
        In Global Javascript (under Site settings) I place the following code to load the scripts:

        <!-- Scripts for the rotating images -->
        <script type="text/javascript" src="/resources/scripts/slideshow.js" mce_src="/resources/scripts/slideshow.js"></script>
        <script type="text/javascript" src="/resources/scripts/header_sm_1.js" mce_src="/resources/scripts/header_sm_1.js"></script>

        <script type="text/javascript">
        <!--
        if (document.images) {
        SLIDES1.image = document.images.SLIDES1IMG;
        SLIDES1.textid = "SLIDES1TEXT";
        SLIDES1.update();
        SLIDES1.play();
        }
        //-->
        </script>

        I choose to place this code in Global Javascript because my slideshow is in my header, and displays on every page. If your slideshow. If your show is only on one page you can place this code in the raw headers for the page via the Meta-Tags dialog for the page under Page Management.

        You can also choose to place the if (document.images) block in the page body (described below). I put it in the HTML head out of habit.
        Finally, in the page itself (or in my case, in the Page header under Site look and feel) I place the HTML to actually locate the slideshow on the page:

        <DIV style="DISPLAY: none" id=SLIDES1TEXT></DIV><A href="javascript:SLIDES1.hotlink()" mce_href="javascript:SLIDES1.hotlink()"><IMG style="POSITION: absolute; FILTER: progid:DXImageTransform.Microsoft.Fade(); TOP: 17px; LEFT: 482px" id=SLIDES1IMG border=0 name=SLIDES1IMG alt="" src="http://denverhighland.org/Resources/Pictures/HUNI-WEB-TOP_Right.png " width=300 height=178></A>

        Note that I use the HTML edit icon rather than the "HTML snippet." I've never had much luck with the snippet.

        It's worth observing that I played around with this a LOT before I got it all working. One must be ... playful ... when customizing WA.

        Hope this helps.

        Rob

      • Larry KillerLarry Killer commented  ·   ·  Flag as inappropriate

        Thanks Rob.

        This just goes to show me that my pea sized brain is not working at the moment. I did what you said in bullet 1 by creating a scripts file under resources. In the folder I put slideshow.js and the file created from the barelyfitz site for my slideshow. In my case that is called Sponsor1.js.

        For bullet 2 - my slideshow is just on one page, so I took the code you provided and added it to raw headers for the page it is on. I also went in and changed all of the src=http://community.wildapricot.com sections to point to the appropriate place on my site. I also removed the <!-- and //--> to make the bottom portion of that code active. Should I have done that?

        And finally on bullet 3 I added your code to the area on my page that I wanted my slideshow. I stripped out all of the POSITION: absolute and TOP and LEFT information so that it would show on my page where I wanted it. I also modified the src= at the bottom to my starting graphic and modified the dimensions to meet my needs.

        After saving, my initial graphic appears where and how I expect it, but no luck on the slide show running! My guess is that I need to modify something in one of the two .js files, but I'm not sure what. I am currently going through the steps of comparing all the code that I have with the Code Walkthrough on BarelyFitz to see what I might be missing.

        This definitely isn't a simple cut and paste as their website indicates! I know I will figure it out eventually, but based on my steps above, please let me know if something jumps out at you!

        Thanks again for your help.

      • Larry KillerLarry Killer commented  ·   ·  Flag as inappropriate

        RCB -

        I am attempting use BarelyFitz, but I seem to be having an issue that I hope you might be able to help me with.

        I am able to load the pictures and all that fun stuff on their website and generate and grab the code. I then go into my wild apricot page and load the script using the <s> button. It seems to load just fine. Instantly the first picture shows on the page, but when I save and preview it, it does not load the other pictures.

        Do you have any idea what I am doing incorrectly?

        Thanks.

      • Mark9992Mark9992 commented  ·   ·  Flag as inappropriate

        Hello,

        First post to the forum. I was wondering if anyone had a nice program to use to integrate an EASY to use slideshow into my webpage that flips through a few photos or figures. I tried using Picasa to do the HTML code but I am not sure where the photos need to be and how I then tweak the code.

        Thanks for your help

        Mark

      Feedback and Knowledge Base

      Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7