5 Replies - 1282 Views - Last Post: 26 July 2013 - 02:09 PM

#1 lledo3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 28-February 11

Scrolling Images

Posted 24 July 2013 - 07:09 AM

So I have a few images and I am using the marquee tag to scroll the images. How can I set the marquee so that first image comes right after the last image and there is no space. Like infinite scrolling loop of images. Here is what I have right now:

<!DOCTYPE html>
<html lang="en">
    <head>

        <title>HTML</title>

    </head>

    <body>

        <div id="container">
            <div id="photobanner">
                <marquee scrollamount="15" scrolldelay="95">
                    <img src="Photo_Gallery.jpg" alt="" />
                    <img src="Photo_Gallery2.jpg" alt="" />
                    <img src="Photo_Gallery4.jpg" alt="" />
                    <img src="Photo_Gallery5.jpg" alt="" />
                    <img src="Photo_Gallery6.jpg" alt="" />
                    <img src="Photo_Gallery7.jpg" alt="" />
                    <img src="Photo_Gallery8.jpg" alt="" />
                </marquee>
            </div>
        </div>
    </body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Scrolling Images

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3492
  • View blog
  • Posts: 10,072
  • Joined: 08-June 10

Re: Scrolling Images

Posted 24 July 2013 - 07:34 AM

since <marquee> is a non-standard and obsolete element, I doubt there are experts that can answer.
Was This Post Helpful? 0
  • +
  • -

#3 Misfit  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 100
  • Joined: 18-July 09

Re: Scrolling Images

Posted 26 July 2013 - 07:04 AM

Dormilich is right - the marquee tag has been made obsolete. You'll need jQuery in order to do this cross-browser.

Download the jQuery plugin from here: http://plugins.jquery.com/marquee/

Write code like..

<!DOCTYPE html>
<head>
<!-- dependencies: jQuery, load as google library  with variable http protocol -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	
<!-- reference the base script -->
<script src="/js/jquery.marquee.js"></script>
	
<script>
//run marquee() on DOM ready
$(function(){ 
	$('.marquee').marquee({
	    //speed in milliseconds of the marquee
	    speed: 15000,
	    //gap in pixels between the tickers
	    gap: 50,
	    //time in milliseconds before the marquee will start animating
	    delayBeforeStart: 0,
	    //'left' or 'right'
	    direction: 'left',
	    //true or false - should the marquee be duplicated to show an effect of continues flow
	    duplicated: true
	});
});
</script>
</head>

<body>
<!-- this now this should work! -->
<div id="container">
	<div id="photobanner">
		<div class='marquee'><img src="Photo_Gallery.jpg" alt="" /></div>
		<div class='marquee'><img src="Photo_Gallery2.jpg" alt="" /></div>
		<div class='marquee'><img src="Photo_Gallery4.jpg" alt="" /></div>
		<div class='marquee'><img src="Photo_Gallery5.jpg" alt="" /></div>
		<div class='marquee'><img src="Photo_Gallery6.jpg" alt="" /></div>
		<div class='marquee'> <img src="Photo_Gallery7.jpg" alt="" /></div>
		<div class='marquee'><img src="Photo_Gallery8.jpg" alt="" /></div>
	</div>
</div>
</body>
</html>



Was This Post Helpful? 0
  • +
  • -

#4 lledo3  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 28-February 11

Re: Scrolling Images

Posted 26 July 2013 - 12:31 PM

I used this but when I up load the file, the images are in a vertical line. I want them to scroll automatically when the page is loaded from right to left with no space between the last image and the first image.

This post has been edited by Dormilich: 27 July 2013 - 11:59 AM

Was This Post Helpful? 0
  • +
  • -

#5 jjh08  Icon User is offline

  • D.I.C Head

Reputation: 55
  • View blog
  • Posts: 190
  • Joined: 13-July 12

Re: Scrolling Images

Posted 26 July 2013 - 12:35 PM

Maybe this website can help you. I skimmed through the code but it looks similar to what you are trying to do. Hope that helps :)
Was This Post Helpful? 0
  • +
  • -

#6 Misfit  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 100
  • Joined: 18-July 09

Re: Scrolling Images

Posted 26 July 2013 - 02:09 PM

View Postlledo3, on 26 July 2013 - 01:31 PM, said:

I used this but when I up load the file, the images are in a vertical line. I want them to scroll automatically when the page is loaded from right to left with no space between the last image and the first image.


It's either a CSS issue or you're not configuring the jQuery settings correctly.

https://github.com/a...aster/README.md <- the docs for the plugin
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1