Skip navigation
Currently Being Moderated

HTML image scrolling

Jun 25, 2012 1:45 AM

Hi,

   Im trying to create some pictures which scroll up the side of the website. I have a basic code but its not exactly how i want it!

 

 

I would like the images to scroll up and not dispear so quick. I also want the images much bigger and a gap between each photo.

Capture scrolling images.JPGThis how i would like it and i want it to scroll slowly.

 

Here is the code i have came up with so far. It doesnt work at all. Any help will be useful

 

 

 

<marquee behavior="scroll" direction="up">
<center>
<br>
<img src="gardenhouse.jpg" width="90" height="90">
<br>
<img src="pool.jpg" width="90" height="90">
<br>
<img src="barn.jpg"width="90" height="90">
<br>
<img src="lightuphouse.jpg"width="90" height="90">
</center>
</marquee>

 

 

 

thanks

Cherish

 
Replies
  • Currently Being Moderated
    Jun 25, 2012 3:56 AM   in reply to cherishrose12344321
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 25, 2012 5:53 AM   in reply to cherishrose12344321

    cherishrose12344321 wrote:

     

    None of the code worked at all?

    Do I take the above as a statement or a question?

     

    If it is the latter, then yes the code does work.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 25, 2012 6:02 AM   in reply to cherishrose12344321

    You are in the best position to answer that. We are not privy to seeing what you have done and unfortunately our mindreaders have gone on strike.

     

    Grumps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 25, 2012 6:08 AM   in reply to Ben Pleysier

    @cherishrose - Show us what you have tried that didn't work and we'll tell you what mistake(s) you have made.  The code that gramps linked for you certainly does work when properly implemented.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 25, 2012 1:01 PM   in reply to cherishrose12344321

    You need to download and extract the jQuery Thumbnail Scroller.zip files to your local site folder.    Did you do that yet?

     

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 26, 2012 12:22 AM   in reply to cherishrose12344321

    Nobody is trying to take the mick out of you. We are here to help you, but you need to help us to help you. It is impossible to know what you have done if you will not share that info, nor are we to know that you are a 17-year old female as you have stated and that you want to be treated as such. Maybe I should add that I am more than half a century your senior.

     

    Now that we are aquainted, have another look at the demo http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_vertical_full.ht ml and if that is what you want, we can assist you to get that result.

     

    Mind, that the best way for us to help you is for you to upload the site to a temporary location and supply a link to that location. I know that on several occasions you have stated that you can't, but that is a word that should not be in your vocabulary.

     

    It's up to you.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 27, 2012 6:27 AM   in reply to cherishrose12344321

    Using Firefox as the browser, right-click on the page. This will show a pop-up menu. In the pop-up menu click on View Page Source as per

    _Capture.jpg

    This will open a new window showing the source code. Click on jquery.thumbnailScroller.css as per

    _Capture.jpg

    This will show you the CSS. Copy and paste the CSS in a local file.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 27, 2012 7:04 AM   in reply to cherishrose12344321

    Whoa! Your too fast!

     

    First let me explain the workings of a (jQuery) widget. It consists of three parts

    1. markup (HTML)
    2. styling (CSS)
    3. script (JS)

     

    Comparing this to a physical object, the

    1. HTML is the hardware like body, wheels seats etc. It is static and does nothing
    2. CSS is the styling like colour, materials used, mag wheels. Still does nothing but is pleasing to the eye.
    3. JS is the engine. This makes the car move

     

    From the above, we can conclude that

    1. if a mudguard is missing, we need to adjust the HTML
    2. if a mudguard is the wrong colour we need to adjust the CSS
    3. if the car does not move, we need to look at the JS

     

    In your case, the button does not work and there is no scrolling. This looks like a problem with the JS. It may be best to elaborate on the JS that is used to animate the widget. This consists of two parts

    1. The main JS-files. This can be one file or a few files.
    2. The constructor

     

    The constructor for your widget looks like

    <script>

    /* jQuery.noConflict() for using the plugin along with other libraries.
       You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or
       if you include jQuery before other libraries in yourdocument's head tag.
       [more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
    jQuery.noConflict();
    /* calling thumbnailScroller function with options as parameters */
    (function($){
    window.onload=function(){
    $("#tS3").thumbnailScroller({
    scrollerType:"clickButtons",
    scrollerOrientation:"vertical",
    scrollSpeed:2,
    scrollEasing:"easeOutCirc",
    scrollEasingAmount:800,
    acceleration:4,
    scrollSpeed:800,
    noScrollCenterSpace:10,
    autoScrolling:0,
    autoScrollingSpeed:2000,
    autoScrollingEasing:"easeInOutQuad",
    autoScrollingDelay:500
    });
    }
    })(jQuery);
    </script>

    and is usually placed in the main document.

     

    The JS files that are required for this widget

    <!-- jquery -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

    <!-- jquery ui custom build (for animation easing) -->

    <script src="jquery-ui-1.8.13.custom.min.js"></script>

    <!-- thumbnailScroller script -->

    <script src="jquery.thumbnailScroller.js"></script>

    If any of the above three files are missing, or not linked properly or in a different order, then this could be at the heart of your problem.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 27, 2012 7:27 AM   in reply to cherishrose12344321

    Have you got a local copy of each of the two following?

    <script src="jquery-ui-1.8.13.custom.min.js"></script>

    <script src="jquery.thumbnailScroller.js"></script>

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 27, 2012 1:03 PM   in reply to cherishrose12344321

    You're missing the jQuery files necessary to make this work.  That's why I told you to download & extract the plug-in.zip files to your local site folder.  

     

    Copying and pasting someone else's code isn't going to work on your site unless you have all the supporting scripts at your end.  The easiest way to get them all is to download the .zip.

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points