HTML Image Slider

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Reklaw
    Senior Member
    • Oct 2012
    • 106

    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?
  • DemOnstar
    Senior Member
    • Nov 2012
    • 1912

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


    Comment

    • Reklaw
      Senior Member
      • Oct 2012
      • 106

      #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

      • Wayne Luke
        vBulletin Technical Support Lead
        • Aug 2000
        • 73981

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

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment

        • Reklaw
          Senior Member
          • Oct 2012
          • 106

          #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

          • DemOnstar
            Senior Member
            • Nov 2012
            • 1912

            #6
            Originally posted by Reklaw
            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

            • Reklaw
              Senior Member
              • Oct 2012
              • 106

              #7
              Originally posted by Wayne Luke
              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

              • Lynne
                Former vBulletin Support
                • Oct 2004
                • 26255

                #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

                • Reklaw
                  Senior Member
                  • Oct 2012
                  • 106

                  #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

                  • Trevor Hannant
                    vBulletin Support
                    • Aug 2002
                    • 24325
                    • 5.7.X

                    #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 (vB6)
                    - Add Admin ability to auto-subscribe users to specific channel(s) (vB6)

                    Comment

                    • Wayne Luke
                      vBulletin Technical Support Lead
                      • Aug 2000
                      • 73981

                      #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 demonstration site.
                      vBulletin 5 API

                      Comment

                      • Reklaw
                        Senior Member
                        • Oct 2012
                        • 106

                        #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

                        • Trevor Hannant
                          vBulletin Support
                          • Aug 2002
                          • 24325
                          • 5.7.X

                          #13
                          Are the script files in the correct location?
                          Vote for:

                          - Admin Settable Paid Subscription Reminder Timeframe (vB6)
                          - Add Admin ability to auto-subscribe users to specific channel(s) (vB6)

                          Comment

                          • Lynne
                            Former vBulletin Support
                            • Oct 2004
                            • 26255

                            #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

                            • Reklaw
                              Senior Member
                              • Oct 2012
                              • 106

                              #15
                              Originally posted by Trevor Hannant
                              Are the script files in the correct location?
                              Originally posted by Lynne
                              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...