Announcement

Collapse
No announcement yet.

HTML Image Slider

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • HTML Image Slider

    Because there are is no image slider built into VB, i sought out to find one that I could use with HTML and insert into a widget to get the desired result. I came across the WOWSlider. Very cool little application. Very user friendly and convenient. I have created a few slideshows but am having some issues with posting the code. It does not display correctly.

    Anyone used this before or want to help me trouble shoot this?

  • #2
    Again Reklaw, this may prove useful. I am downloading now, I think it is a demo version but we shall see.


    Comment


    • #3
      Yeah let me know how it goes! It looks really cool! My slideshow works well, but I am just having an issue integrating it into the site. Let me know how yours works and it you understand it more than I.

      Comment


      • #4
        What is the specific problem you're having?
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        I am not currently available for vB Messenger Chats.

        Comment


        • #5
          Pasting the code into the HTML widget does not translate into the site. I believe it may be because I already have an HTML head from an existing static widget as explained in your tutorial you posted today @ Important Information about the Static HTMLModule. Not sure about iframe and how to incorporate it. I will have to look into it. Have you had looked into the WOWslider at all? If it works, it may be a good recommendation for users wanting to incorporate an image slider into their sites.

          Comment


          • #6
            Originally posted by Reklaw View Post
            Yeah let me know how it goes! It looks really cool! My slideshow works well, but I am just having an issue integrating it into the site. Let me know how yours works and it you understand it more than I.
            I am totally virgin to all of this, but seem to be doing ok. I have no idea really what I am doing but neither did anybody else until they made a start. I will let you know as soon as I get round to it. Cheers....


            Comment


            • #7
              Originally posted by Wayne Luke View Post
              What is the specific problem you're having?
              Have any ideas if this is the issue?

              Pasting the code into the HTML widget does not translate into the site. I believe it may be because I already have an HTML head from an existing static widget as explained in your tutorial you posted today @ Important Information about the Static HTMLModule. Not sure about iframe and how to incorporate it. I will have to look into it. Have you had looked into the WOWslider at all? If it works, it may be a good recommendation for users wanting to incorporate an image slider into their sites.

              Comment


              • #8
                What is the exact code you are entering into the HTML widget that isn't working?

                Please don't PM or VM me for support - I only help out in the threads.
                vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                Want help modifying your vbulletin forum? Head on over to vbulletin.org
                If I post CSS and you don't know where it goes, throw it into the additional.css template.

                W3Schools <- awesome site for html/css help

                Comment


                • #9
                  Here is the code for the slider I created.

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <title>LoanForum.org generated by WOWSlider.com</title>
                  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                  <meta name="keywords" content="LoanForum.org, WOW Slider, Free Photo Slideshow Creator, Photo Slideshow Program" />
                  <meta name="description" content="LoanForum.org created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
                  <!-- Start WOWSlider.com HEAD section -->
                  <link rel="stylesheet" type="text/css" href="engine1/style.css" />
                  <script type="text/javascript" src="engine1/jquery.js"></script>
                  <!-- End WOWSlider.com HEAD section -->
                  </head>
                  <body style="background-color:#d7d7d7">
                  <!-- Start WOWSlider.com BODY section -->
                  <div id="wowslider-container1">
                  <div class="ws_images"><ul>
                  <li><a href="http://www.loanforum.org/register"><img src="data1/images/joinfam.jpg" alt="LoanForum.org" title="LoanForum.org" id="wows1_0"/></a>The best mortgage, loan and real estate resource on the web. Your online resource to all of your mortgage needs. Please join our community today! </li>
                  <li><a href="http://www.loanforum.org/forum"><img src="data1/images/keys.jpg" alt="Mortgage Forum, Loan Forum, Real Estate Forum" title="Mortgage Forum, Loan Forum, Real Estate Forum" id="wows1_1"/></a>The best mortgage, loan and real estate resource on the web. Your online resource to all of your mortgage needs. New loans, refinancing, HARP loans, purchasing, FHA, VA, lowest interest rates </li>
                  <li><a href="http://www.loanforum.org/MortgageCalculators"><img src="data1/images/calcs.jpg" alt="Mortgage Calculators, Loan Calculators, Interest Rate Calculators " title="Mortgage Calculators, Loan Calculators, Interest Rate Calculators " id="wows1_2"/></a>The best mortgage, loan and real estate resource on the web. Your online resource to all of your mortgage needs. New loans, refinancing, HARP loans, purchasing, FHA, VA, lowest interest rates </li>
                  <li><a href="http://www.loanforum.org/blogs"><img src="data1/images/buzzblog.jpg" alt="BUZZBLOG" title="BUZZBLOG" id="wows1_3"/></a>The latest mortgage information, mortgage resources, and mortgage news. Your online resource to all of your mortgage needs. Subscribe to our mortgage and real estate blog to stay on top of The Buzz</li>
                  </ul></div>
                  <div class="ws_bullets"><div>
                  <a href="#" title="LoanForum.org"><img src="data1/tooltips/joinfam.jpg" alt="LoanForum.org"/>1</a>
                  <a href="#" title="Mortgage Forum, Loan Forum, Real Estate Forum"><img src="data1/tooltips/keys.jpg" alt="Mortgage Forum, Loan Forum, Real Estate Forum"/>2</a>
                  <a href="#" title="Mortgage Calculators, Loan Calculators, Interest Rate Calculators "><img src="data1/tooltips/calcs.jpg" alt="Mortgage Calculators, Loan Calculators, Interest Rate Calculators "/>3</a>
                  <a href="#" title="BUZZBLOG"><img src="data1/tooltips/buzzblog.jpg" alt="BUZZBLOG"/>4</a>
                  </div></div>
                  <a class="wsl" href="http://wowslider.com">Photo Gallery Slideshow by WOWSlider.com v2.8</a>
                  <div class="ws_shadow"></div>
                  </div>
                  <script type="text/javascript" src="engine1/wowslider.js"></script>
                  <script type="text/javascript" src="engine1/script.js"></script>
                  <!-- End WOWSlider.com BODY section -->
                  </body>
                  </html>

                  When I create the widget the images appear with the broken/damaged symbol and the title and description next to them only. The slider is not actually appearing correctly. The test model I created works though.

                  Comment


                  • #10
                    You have an extra closing DIV in there. Try copying that into an HTML editor, indent each section so that they become easier to see the start and end of each DIV element and you should see it.
                    Vote for:

                    - *Admin Settable Paid Subscription Reminder Timeframe*
                    -
                    *PM - Add ability to reply to originator only*
                    - Add Admin ability to auto-subscribe users to specific channel(s)
                    - Highlight the correct navigation tab when you are on a custom page
                    - "Quick Route" Interface...
                    - Allow to use custom icons for individual forums

                    Comment


                    • #11
                      This is what you should be using:
                      HTML Code:
                      <!-- Start WOWSlider.com BODY section -->
                      <div id="wowslider-container1">
                      	<div class="ws_images">
                      		<ul>
                      			<li><a href="http://www.loanforum.org/register"><img src="data1/images/joinfam.jpg" alt="LoanForum.org" title="LoanForum.org" id="wows1_0"/></a>The best mortgage, loan and real estate resource on the web. Your online resource to all of your mortgage needs. Please join our community today! </li>
                      			<li><a href="http://www.loanforum.org/forum"><img src="data1/images/keys.jpg" alt="Mortgage Forum, Loan Forum, Real Estate Forum" title="Mortgage Forum, Loan Forum, Real Estate Forum" id="wows1_1"/></a>The best mortgage, loan and real estate resource on the web. Your online resource to all of your mortgage needs. New loans, refinancing, HARP loans, purchasing, FHA, VA, lowest interest rates </li>
                      			<li><a href="http://www.loanforum.org/MortgageCalculators"><img src="data1/images/calcs.jpg" alt="Mortgage Calculators, Loan Calculators, Interest Rate Calculators " title="Mortgage Calculators, Loan Calculators, Interest Rate Calculators " id="wows1_2"/></a>The best mortgage, loan and real estate resource on the web. Your online resource to all of your mortgage needs. New loans, refinancing, HARP loans, purchasing, FHA, VA, lowest interest rates </li>
                      			<li><a href="http://www.loanforum.org/blogs"><img src="data1/images/buzzblog.jpg" alt="BUZZBLOG" title="BUZZBLOG" id="wows1_3"/></a>The latest mortgage information, mortgage resources, and mortgage news. Your online resource to all of your mortgage needs. Subscribe to our mortgage and real estate blog to stay on top of The Buzz</li>
                      		</ul>
                      	</div>
                      	<div class="ws_bullets">
                      		<div>
                      			<a href="#" title="LoanForum.org"><img src="data1/tooltips/joinfam.jpg" alt="LoanForum.org"/>1</a>
                      			<a href="#" title="Mortgage Forum, Loan Forum, Real Estate Forum"><img src="data1/tooltips/keys.jpg" alt="Mortgage Forum, Loan Forum, Real Estate Forum"/>2</a>
                      			<a href="#" title="Mortgage Calculators, Loan Calculators, Interest Rate Calculators "><img src="data1/tooltips/calcs.jpg" alt="Mortgage Calculators, Loan Calculators, Interest Rate Calculators "/>3</a>
                      			<a href="#" title="BUZZBLOG"><img src="data1/tooltips/buzzblog.jpg" alt="BUZZBLOG"/>4</a>
                      		</div>
                      	</div>
                      	<a class="wsl" href="http://wowslider.com">Photo Gallery Slideshow by WOWSlider.com v2.8</a>
                      	<div class="ws_shadow"></div>
                      </div>
                      <script type="text/javascript" src="engine1/wowslider.js"></script>
                      <script type="text/javascript" src="engine1/script.js"></script>
                      <!-- End WOWSlider.com BODY section -->
                      Translations provided by Google.

                      Wayne Luke
                      The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                      vBulletin 5 Documentation - Updated every Friday. Report issues here.
                      vBulletin 5 API - Full / Mobile
                      I am not currently available for vB Messenger Chats.

                      Comment


                      • #12
                        Thank you both for the help! I tried the coding but it still does not display correctly. I am going to save the file into my host directory and then try it from their. I think it is an issue with the file location. I will keep you posted!

                        Comment


                        • #14
                          You also need to add these two lines at the top:
                          HTML Code:
                          <link rel="stylesheet" type="text/css" href="engine1/style.css" />
                          <script type="text/javascript" src="engine1/jquery.js"></script>
                          And you did add the /engine and /data directory to your root?

                          (I just added this to my own test page and it works fine.)

                          Please don't PM or VM me for support - I only help out in the threads.
                          vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                          Want help modifying your vbulletin forum? Head on over to vbulletin.org
                          If I post CSS and you don't know where it goes, throw it into the additional.css template.

                          W3Schools &lt;- awesome site for html/css help

                          Comment


                          • #15
                            Originally posted by Trevor Hannant View Post
                            Are the script files in the correct location?
                            Originally posted by Lynne View Post
                            You also need to add these two lines at the top:
                            HTML Code:
                            <link rel="stylesheet" type="text/css" href="engine1/style.css" />
                            <script type="text/javascript" src="engine1/jquery.js"></script>
                            And you did add the /engine and /data directory to your root?

                            (I just added this to my own test page and it works fine.)
                            @Trevor - Script files???

                            @Lynne - You got it to work!!!!!? Awesome! I did not add either.... /Engine? /Data? Please enlighten me....

                            Comment

                            Related Topics

                            Collapse

                            Working...
                            X