Announcement

Collapse
No announcement yet.

Slide Show JQuery Help

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

  • Slide Show JQuery Help

    Can anyone give suggestions on why the images are not showing up? I am using Serie3 - Workshops for my slide show and have uploaded both jquery and js that was required.

    Thanks.
    freckledexpressions.com

  • #2
    Off the bat, you have some errors in the code for loading the JS files:

    Code:
    <script type="text/javascript" src="assets/jquery-1.9.1.min.js">< /script>
    <script type="text/javascript" src="assets/s3Slider.js">< /script>
    < script src="js/s3Slider.js" type="text/javascript">< /script>
    < script src="js/jquery.js" type="text/javascript">< /script>
    All of those extraneous spaces are causing problems. like the space in < /script> and in < script

    Fix those will be step one. Once you've done that repost and I'll see what else is causing trouble.


    Also, you probably don't want the JS files loaded in the
    <!--START: quicksearch-->
    <!--END: quicksearch-->


    block. Put them either above or below it. This won't solve your current problem, but if you ever decide to disable quick search then these unrelated files will not load.

    Comment


    • #3
      THANK YOU!! Silly spaces... That fixed it :)

      Comment


      • #4
        Another question:
        How do I get the images to fit right? My images are saved at 525 but they are being cut off? When I increase the size of the image in the css,

        Code:
        <!-- CSS -->
        <style type="text/css" media="screen">
        #slider {    
        width: 525px; /* important to be same as image width */    
        height: 263px; /* important to be same as image height */  
        position: relative;left; /* important */    
        overflow: hidden; /* important */
        }
        
         #sliderContent {    
        width: 525px; /* important to be same as image width or wider */    
        position: absolute; /* important */    
        top: 0; /* important */    
        margin-left: 0; /* important */
        }
        then more of the image gets cut off and it moves the image to the right, so it is no longer centered. How do I fix this?

        Comment


        • #5
          Well this is a little complicated to debug because there are so many variables in play, but part of the problem is that your images are inconsistent sizes.
          babyshowerflasher.jpg is 700x350
          save_the_date is 525x263
          newbirthdayheader is 550x275

          Comment


          • #6
            Clues

            Cristy,
            • Have you set all your image heights to be 263px or less?
            • If so, check your javascript codes. There may be parameters there requiring change.
            • I had a code set I was working with once that was finicky like yours. I took the images that were less than the height or width and pasted them onto a "frame" with the full dimensions and background color, centered it and renamed it.

            Comment


            • #7
              Your ul has padding on the left pushing your images right and a margin on the top pushing your image down.
              Add the following to your CSS file

              #sliderContent {
              margin: 0; <-- Add this line but not this comment
              padding: 0; <-- Add this line but not this comment
              position: absolute;
              top: 0;
              width: 525px;
              }

              #slider {
              height: 263px;
              margin-left: 20px; <-- Add this line but not this comment
              overflow: hidden;
              position: relative;
              width: 525px;
              }

              BACKUP YOUR FILES BEFORE YOU MOD THEM
              - Peace
              www.ifilters.net

              Comment

              Working...
              X