Scrolling images

http://www.myttonwilliams.co.uk/?id=65
I came across this site and want to copy the way it
functions... in terms of how you can scroll across horizontally. i
want to copy it more or less exactly in the sense that both text
and images scroll and disappear to the left. I'm working in
dreamweaver and appreciate that this clearly uses javascript but
would like to work out how because my knowledge is very limited.
Please help... if anyone can provide and similar examples i'd be
open to sacrifice providing its not through use of a scroll
bar...

I don't know why these things are so popular lately.
http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
Nancy O.
Alt-Web Design & Publishing
www.alt-web.com

Similar Messages

Help with scrolling image gallery?

Hi, using the code for a scrolling image gallery found here (Build an Infinite Scrolling Photo Banner With HTML and CSS | Design Shack). When I pasted in the CSS and HTML, it displayed all vertically and broke my title div. Not a professional, so I could use an expert eye to point out any mistakes. Trying to make title in vertical center of page, scrolling image gallery horizontal in the middle, and links directly below. HTML is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Marc Moss Art</title>



<link href="style.css" rel="stylesheet" type="text/css">
<link href="../../../../style.css" rel="stylesheet" type="text/css">

</head>
<body topmargin="600">
<div id="wrapper">
<div class="container">
<header></header>
<div id="content" style="height:300px;width:1000px;float:left;"><h1>art by marc moss</h1>
</div>
    
    <div class="photobanner">
        <img class="first" src="../../../../mosspictures/DSCN0038.JPG" alt="">
        <img src="../../../../mosspictures/DSCN0040.JPG" alt="">
        <img src="image-3.jpg" alt="">
        <img src="image-4.jpg" alt="">
        <img src="image-5.jpg" alt="">
        <img src="image-6.jpg" alt="">
        <img src="image-1.jpg" alt="">
        <img src="image-2.jpg" alt="">
        <img src="image-3.jpg" alt="">
        <img src="image-4.jpg" alt="">
    </div>
    <nav>
    <div id="navigation">
    <ul>
    <li><a href="#">bio</a></li>
    <li><a href= "#">inspiration</a></li>
    </ul>
    </div>
    </nav>
</article>
<footer>
</footer>
</div>
</div>
</body>
</html>

Is this supposed to be a WordPress site? None of these images are found on the server. Those folders don't exist either.
<img class="first" src="mosspictures/DSCN0038.JPG" alt="">
   <img src="mosspictures/DSCN0040.JPG" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-5.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-6.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-1.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-2.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
Nancy O.

Scrolling image gallery problems

I am creating a scrolling image gallery using thumbnails. I have 36 thumbnails that are 100 x 100 px. I cannot figure out the x y coordinates to line up the images correctly. They are overlapping. I've put in the first x coordinate at 0 and the first image goes to the left, and that is fine, it is when I click the last image to put in a number, which I thought would be 36 x 100, they do not line up, they over lap. Does anyone have a clue how to fix this? I am working on this site for a very pushy client who wants it done NOW...Thanks,

If you crerate a Sprite or Movieclip 3600 x 100 you can place then one after another on that container then you only have 1 object to place and scroll.

Newbie Scrolling Image Gallery

can someone help me figure out why my site isn't loading an
external image gallery? the tutorial i used can be found here:
http://www.oman3d.com/tutorials/flash/imagegallery/
they made the image gallery is completely done with
actionscript and it works in the .swf for the gallery, but as soon
as i call it to be loaded into the home .swf it doesn't work.
here's the link to the sites homepage:
(oh and dont worry i know the pics are pixelated and some
things need fixed, i'm just trying to get the site working first)
http://lightboy101.110mb.com/bootleg/Splash.swf
--- here is the gallery----
http://lightboy101.110mb.com/bootleg/Gallery.swf
if anyone can help me, please let me know. or if you know a
tutorial with a better scrolling image gallery, that would be
great. thanks.

awesome! thanks! but now i seem to have another problem... =/
the far left and far right images are cut off. it's as if the
gallery width is being set to the stage of the entire site, and not
the gallery.swf height/width. i think it has something to do with
this code:
myThumb_mc._x = (i-1)*myThumb_mc._width;
myThumb_mc._y = (Stage.height-myThumb_mc._height)/2;
and
large_mc._x = (Stage.width-large_mc._width)/2;
large_mc._y = (Stage.height-large_mc._height)/2;

Creating scrolling image banners

Hi All,
Can anyone point me in the right direction on haw to create a banner that enables me to scroll images like a slideshow that is executed when the browser opens the site..
Thanks very much for your help.

You could try BannerZest...
There's also SWF 'N SLIDE...
And this old thread may help...

Need help with inserting frame with scrolling images

Hi,
Im a beginner and need help putting a single box/frame with scrolling images in the middle of my layout, so that when viewed in browser, the header and footer remain in place, while the images and info in the frame in the centre of the page can be scrolled down/up?

You can use an iframe element <iframe src="" width="" height="" scrolling="yes"> though if you're concerned with crawlers you should avoid frames as much as possible.

Horizontal Scrolling Image Viewer

I am new to web design but certainly trying - my goal is to
include/make a horizontal scrolling image viewer like the one seen
on this site:
http://www.fraxel.com/patients.aspx
- any advice?
-JL

are you good with Flash?
http://board.flashkit.com/board/showthread.php?t=756627
Nancy O.
Alt-Web Design & Publishing
www.alt-web.com

Action Script problem with scrolling images

doing a tutorial and got to the stage of action scripting mouse control for scrolling images.
checked the script in Actions. And said it was ok...No errors found.
Tested the movie and there were 2 compiler errors reported.
Scene 1. layer 'action script', Frame 1, line 1: 1120:Access of undefined property _root. _root.onEnterFrame=funtion(){
Scene 1. layer 'action script', Frame 1, line 2: 1120:Access of undefined property _root. _if(_root._xmouse<50){
Scene 1. layer 'action script', Frame 1, line 1: Warning: 1058: Migration issue: The property _root.onEnterFrame=funtion(){
Can anyone help me understand this.
thanks

It sounds like you are mixing up AS2 code with AS3 compiling. You may need to change you publish settings to AS2.

Cool way to make a grab & drag scrolling image...

Just thought I'd share this.
I was trying to figure out a way to make an image that's wider than the page scrollable with grab and drag functionality to it, rather than using a scrollbar.
It's pretty simple actually. I just created a box the size of the page and then imported my jpeg (The jpeg is about 5x as wide as the page, but at 72 dpi the file size is very manageble). Then it was just a matter of selecting the box I created and the jpeg together and creating a Horizontal Slider out of it. It works great! Just assign the box as the track component and your image as the thumb.
You just need to make sure that the Snap Interval and Step Size in the properties panel are both set to "0" for it to scroll smoothly.
I was hoping there's be a way to add momentum to the scroll, simalar to kinetic scrolling on an iphone or something, but I haven't figured that out...yet.
If anyone knows how, that would be killer.
Either way, it's kind of a cool way to set up a gallery or a visual timeline.
This may be old news to some of you, but I thought I'd share anyways.
Cheers,
Ryan

THIS DOES NOT WORK IN PANINI. JUST CS5.

Issues creating scrolling images for photo gallery

Hi all,
I'm attempting to create a thing where my thumbnails will scroll across the bottom of the page, like when you put the mouse on the right it scrolls right and visa versa. I found a great tuturial only to realize halfway in that it was done with Flash 8, therefore apparently quite a few things have changed. And this is my first stab at Flash!
The first place i noticed is when my motion tween didn't work, so I instead created a 'Classic Tween' finding it had the same affect as 'Motion Tween' in Flash 8, however as I progressed in the tut, I don't think the results were the same.
My images scroll but after creating a _xmouse<40){........prevFrame, there only continue to scroll, the prevFrame command doesn't work!
So to my question...does anyone know of a good tut for this type of thing for CS5? OR, is anyone really familiar with both Flash 8 and CS5 and could help me pinpoint the differences for what I'm attempting to create?
Thank you SO MUCH, any help is really appreciated!
Giuseppe

So I figured it out after googling for a while and guess and testing...
MovieClip(root).addEventListener(Event.ENTER_FRAME, enterFrameHandler);
function enterFrameHandler(event:Event):void
if (MovieClip(root).mouseX > 600 && mouseX < 800 && mouseY > 450)
imgBar.nextFrame();
if (MovieClip(root).mouseX > 800 && mouseY > 450)
        imgBar.nextFrame();
imgBar.nextFrame();
    if (MovieClip(root).mouseX < 300 && mouseX >100 && mouseY > 450)
imgBar.prevFrame();
    if (MovieClip(root).mouseX < 100 && mouseY > 450)
        imgBar.prevFrame();
imgBar.prevFrame();

Help with scrolling images/text

I have created a web site already and know how to add
scrolling text to my site, however I can't figure out how to insert
images into my scrolling text. Can any one help?
Thank you!

It sounds like these items are on the Master page, in which case you need to go to the master page to edit them or move them. You can release them from the Master and bring them on to the current page by using Shift-Command and clikking on the object.
It is also possible they could be on a locked layer. Check your Layers palette.

Scroll image with adjustment brush on

Hi - anybody know how:-
Zoom to 100% and have the adjustment brush switched on, and then scroll into other areas of the image (without closing the adjustment brush dialogue)?? I mean like in PS you can toggle quickly between brush and the hand, so that you can scroll to another part of the image and then carry on painting with the brush.
Thanks

In Windows, hold down the spacebar- cursor becomes a hand.

Horizontal Scrolling Image JITTERY?

Hello, I just made a simple flash movie with one 3000 pixel
wide jpeg scrolling from left to right, I am using about 500 frames
at about 20 frames per second to scroll it using a simple motion
tween.
There is not much to this movie, but the image is jittery and
does not flow SMOOTHLY - any ideas how to to do this? Speedint the
frame rate up helps some, but I really need this to move slow.
Thanks

great, glad you were able to find the problem. Whoa, that's a
big image. Flash has a limit of 2880 for bitmaps and so on...
beyond that it's good luck, most of the time will throw an error. I
would think about getting the size down some, you could break it up
into pieces and bring them in and get rid of them when needed. btw-
what resolution is the image(dpi)?
2172, was an example, the ending position should be
determined by where you placed the image in the MC (center or at
0,0 ... ?) if positioned at the 0,0 it should start at 0 - width,
and end at 0 for left to right travel.
right, changing speed is fine, the number represents the
number of frames it will take to travel the distance, frame rate is
not effected by this. Leave it at 30 fps.

Scrolling Images Advice

I have 8 images of 600 x 500 px that I would like to display on the home page of my website. How do I arrange it so that they scroll over one another in a transition? Do I need to learn Flash in order to achieve this? I am not looking for a photo gallery type of effect - just for all the images to appear for 4 or 5 seconds one after the other in a repeating sequence.Thx
Web Premium CS4 Mac OSx

You can do it with flash, you can also do it with php and probably animated gifs. The learning curve for flash is somewhat steep, but what you are asking for is not complicated.
There are packages you can buy that make short work out of it. I like http://projectseven.com , but there are plenty of off the rack extensions our there. If you saw a sample of what you like, take a peak at the code and see if they identify what they used.
Gary

Making a scrolling image gallery?

hello,
I am just learning HTML and am stuck. I have been trying to make an image gallery that will scroll horizontally, however all my images keep stacking vertically they do not scroll and they don't remain "hidden" I have my images in a div tag and its styled, I've copied some script from the net as well to make them auto scroll... and they still do the same thing no matter what I try. What am I missing?

jQuery Smooth Div Scroll - smooth content scrolling jQuery plugin - Thomas Kahn
that is where I got this code from
this is what my page looks like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<link href="maincss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv2 {
    position:absolute;
    width:58px;
    height:39px;
    z-index:600;
    left: 31px;
    top: 10px;
#scrollable div.scollablearea {
    position:relative;
    disply:block;
    float:left;
    margin:0;
    padding:0;
h3 {
    word-spacing: 100px;
</style>
<script type="text/javascript">
    $(document).ready(function (){
        $("#makemescrollable").smoothdivscroll({
            mousewheelscrolling: "alldirections", manualcontinuousscrolling: true, autoscrollingmode: "onstart"
    </script>
</head>
<body>
<div class="container">
    <div class="header">Clarendon Miller Community Archives<br />
</div>
<div class="sidebar1" id="menu">
        <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
    <li><a href="documents.html">Documents</a></li>
      <li id="menu"><a href="">Photos</a>
          <ul>
            <li><a href="plevna.html">Plevna</a></li>
            <li><a href="ompah.html">Ompah</a></li>
            <li><a href="ardoch.html">Ardoch</a></li>
            <li><a href="fernleigh.html">Fernleigh</a></li>
            <li><a href-="snow road.html">Snow Road</a></li>
        </ul>
          </li>
        <li><a href="books.html">Books</a></li>
             <li><a href="">Events</a>
             <ul>
             <li><a href="pastevents.html">Past Events</a></li>
             <li><a hfref="futureevents.html">Future Events</a></li>
             </ul>
             </li>
    </ul>
    </div>
<div class="content">
    <h2>Churches</h2>
    <h4>Holy Trinity Anglican Church</h4>
<h6>History-</h6>
    <h6>Gallery-</h6>
    <div id="scrollable">
    <img src="image/plevna/church/anglican/holytrinityoutside1small.jpg" alt="holy trinity plevna" id="holytrinity6"/>
   <img src="image/plevna/church/anglican/holytrinityoutside2small.jpg" alt="holy trinity plevna" id="holytrinity7"/>
   <img src="image/plevna/church/anglican/holytrinityoutside3small.jpg" alt="holy trinity plevna" id="holytrinity8"/>
   <img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
   <img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
   <img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
   <img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
   <img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity10"/>
   </div>
    <h4>Plevna United Church</h4>
    <h6>History-</h6>
    <h6>Gallery-</h6>
</div>
<div class="footer">
    <p> KFPL <span class="justifyrt"> in partnership with Township of North Frontinac</span></p>
    <div id="apDiv2"><img src="kfpl.jpg" width="57" height="36" id="Image2" /></div>
</div>
</div>
</body>
</html>

Scrolling images

Similar Messages

Maybe you are looking for