Vertically scroll a series of images on the page?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I would like to create a vertical column of scrolling images; nothing fancy, just one after another, connected, like a filmstrip. I can do it with Slide but they have some really hideous that display. Is there anything else available besides Slide?
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like

Posted 8 years ago

  • 1
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Hey Mike,

I haven't tested this as I am about to head out, but this seems to be what you want. Just fill in the fields and click create.

http://www.bigoo.ws/generator/image_s...

Hope this helps.

John McCarthy
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Mike,

You also have the option of adding a scrolling image marquee. It requires you to copy and paste a bit of HTML code. All you need to do is generate the code for the marquee and paste it on your site in an HTML Widget.

Follow these steps:

1. Upload the images to your File Manager.
2. Note down the image URLs (your domain name, followed by /resources/filename.jpg. Remember to include any folders in the path of the image, and replace "filename.jpg" with the actual filename of your image).
3. Go to: TweakYourPage.
4. They have a generator where you fill in the number of images you want for your marquee and the image URL's (the ones you wrote down in step 2 above).
5. When you have generated the code, copy and paste it into an HTML Widget in Yola on the desired location of your page.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Mike,

I have a scroller on my site. Check out an example on this page http://travelsa.cc/wc-capetown.php This one is quite complex because it runs in an iframe. The benefits of using the iframe method is that you can update it in one place and it updates multiple pages.

If you are prepared to use some HTML and javascript you should look at the Dynamic Drive site. Here's a link to their various scrollers. http://www.dynamicdrive.com/dynamicin...
Photo of Ruhan

Ruhan

  • 117 Posts
  • 0 Reply Likes
Boomer, can you maybe help me with this step-by-step. What scroller did use? Where did you paste what? Sorry, but I`m kind of a novice when it comes to this kinda stuff! Love the website though!
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Thanks for the suggestions everyone. The marquee seems to be the simplest. Question about the things on the dynamic drive website: I notice most of those scrollers and other effects require you to edit both the head section and where you want the effect to appear. How does one edit the head section of a yola page to add the necessary code?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Pasting the code into the 1st HTML widget on your page normally works.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Boomer, you mean pasting the code that goes in the head? Would I need to put head tags? I'd think they are already defined somewhere out of my reach?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I normally paste the code that they say must go into the head section, into the 1st HTML widget (without the <head>....</head> tags)

... and the <body>...</body> code where you would like to display the scroller on your page. (once again, leave out the body tags).

You are right, the head an body tags are already defined. Don't call them again.
Experiment on a test page, you'll soon get the hang of it. Good luck!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey Mike, you don't have to put head tags. Just paste them in an html widget (and put it as the first widget). That works. Even the CSS style sheets work, and JavaScript, they just recommend that you put it int he head but you don't have to.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Thanks, I will remember that for other script things that I use. I think the the regular marquee works well. Just had to resize my images so that they were all the same width and use the hspace and vspace attributes to position it nicely.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Cool... glad it works. It's pretty hard to break Yola (from us users point of view ;-). Don't be scared to experiment. When are we going to see your site?
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Fairly soon.. It's not as good as yours; how did you get those heading graphics on the various boxes?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
It's all HTML coded with div's. Give me a minute and I'll grab some code for you.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
I don't understand divs and all that code stuff.. I can copy and paste code into a box, that's about it, like with the marquee. I guess that is why I'm using Yola lol
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Here are two examples of headers. Change width,height,font and colors to suite, etc.

For a text header:

<div style="width:324px; height:12px; font-family:verdana; font:bold 11px verdana; text-align:left; padding:10px; background-color:yellow; border:1px;">
YOUR HEADER TEXT GOES HERE...
</div>

For an image header:

<div style="width:324px; height:12px; font-family:verdana; font:bold 11px verdana; text-align:left; padding:10px;
background-image:url('/resources/YOUR_HEADER_IMAGE.JPG'); border:1px;">
YOUR HEADER TEXT GOES HERE...
</div>

Here is an example of the "body" (the div below the header div):

<div style="width:324px; height:500px; font-family:verdana; font:bold 11px verdana; text-align:left; padding:10px; background-color:yellow; border:1px;">
YOUR BODY TEXT GOES HERE...
</div>

Paste the header and the body into two seperate HTML widgets one below the other.
It's all pretty easy once you get familiar with it. If you get stuck, give me a shout.
I have to go now unfortunately.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
On my website, I use lots of divs, and I position them on the page and you can literally put any element anywhere on the page! And, you can really do anything with HTML! And, if you visit my website, you will see a orange note at the top, its cool! All I do is put all the text for the note at the top inside a div element and then position it from the top 0px. Then, I position it from the right 50%. I also give an option to close the note! I use JavaScript for that! I just have the link hide the div with JavaScript. You can see it at: www.nathansmusicstudio.cz.cc (its an orange note at the top)
Photo of INDI

INDI

  • 189 Posts
  • 2 Reply Likes
@ Nathan....good grief, you lost me on the first line :( I clicked on your link but I can't see any "orange" note at the top, unless you are meaning the "yellow" boxed area of text ??? I love that funky mouse pointer :) too cool..where do you find them?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--

Hey INDI! I am sorry, yes it is yellow with an orange border! It was late last night when I posted the comment! And, if you want your own mouse pointer, you have to use CSS. Here is the CSS to insert into your page (Unless you have an external style sheet, then take the style tags out and insert it in the style sheet) <b>Here is the CSS for the same exact cursor on my page:</b>

<style type="text/css">
body {
cursor: url(http://advimages.nexon.net/MapleStory..., auto;
}
A {
cursor: url(http://advimages.nexon.net/MapleStory..., url(http://advimages.nexon.net/MapleStory..., auto;
}
</style>

<b>Here is the code for a cursor you'd like (Use this if you don't want the same kind of cursor on my page):</b>

<style type="text/css">
body {
cursor: url( URL OF CURSOR HERE ), auto;
}
A {
cursor: url( URL OF "HOVER OVER LINK" CURSOR ), auto;
}
</style>

Remember to replace "URL OF CURSOR HERE" with a URL of the Cursor you'd like to show up when you are on the page and to replace "URL OF 'HOVER OVER LINK' CURSOR" with the cursor you'd like to show up when you hover over a link. If you want the same one as mine, then just use the first CSS code.

I hope that helps!

-->
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
I'm pretty much stuck positioning things where the boxes in Yola allow me to place them (one on top of the other)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Unless you change the layout and you can put stuff in a "side bar" with 2-column-left (Or right).
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Yeah, I went through all the templates, they're all so similar. I liked the template diversity on weebly better before I chose Yola... I dunno, I'll figure out something.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey Mike, I was talking about the layout. Not the template. If you don't know how to change the layout, here is how you do it;

Below the page drop down list and next to the Change Background link, there is a link that says "Change Layout" and you can change how much columns there are. For example, you can choose 2-column-left (Or right) and there will be a little side bar and then a bigger space for the content. My website is a good example (The layout is 2-column-right): My site
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Mike

In terms of your layout, you could use a Column Divider Widget.

A Column Divider widget is a great way to change the look and design of your page. You can add widgets into the Column Divider, or add even more Column Divider widgets inside the Column Divider widget.

The Column Divider widget is located on the sidebar on the right hand side of the site builder. Click on the Widgets tab at the top of the sidebar, and open the category of widgets labeled "Standard". Then drag the Column widget onto your page.

The center divider of the Column Divider widget can be dragged to the left or right to change the size of the columns. You can also edit the margins by clicking on the Properties tab in the right-hand sidebar. You'll see top, bottom, right, left margin entry box settings displayed that you can edit to see how your text and and/or images are altered.

I hope that helps.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Apologies Mike,

I gave you the wrong advice in my last paragraph. Paste both snippets of code (seperated by a few spaces) one below the other in ONE HTML widget. That should solve your positioning problem. Sorry, it was late when I wrote that.
Photo of Mike C

Mike C

  • 86 Posts
  • 1 Reply Like
Hi, it's ok about the wrong advice as I haven't had time to play with the code you put up yet. Thanks again for the info!