Basic HTML Help

[Revels]

Does anyone know how I can create something like this?

Needs to be basic HTML really, as it will be going into a blog post, so not really wanting heavy CSS/jQuery type stuff.

Live link here - http://itunes.apple.com/us/app/words-with-friends/id322852954?mt=8 (that won't open iTunes)

Trying searching for image sliders brings up things way more complicated than I need.

Ta.

 

[_Logie]

Create something like the app or a webpage? o.0

 

[Adam.]

Have a look on w3schools. They are usually good with the basics.

 

[C.J]

What is it you want? The scrolling image/slider?

Without CSS, I can't see it being possible.

I've had a quick look in the source code, and looks like the images are within these two tags;

<div metrics-loc="Swoosh_" class="swoosh lockup-container application large screenshots" rows="1">

<div class="lockup">

Their CSS/Style sheet for this can be found here, but it's a bit messy to read through;
http://r.mzstatic.com/htmlResources/D1B6/web-storefront-preview.cssz

In theory, find the two tags, within the CSS and you're halfway there.

It must be using Java too, as when I disable Java on my browser, the slider stops working. I'm too tired to look any further though.

 

[dt2703]

It'll use javascript, which is by far the easiest way. CSS really has nothing to do with the animation, it just handles the style (look and feel), this can be embedded into the html, as can javascript. It's seperated for a reason, to make it easier to read and manage.

Really, you want to look at JQuery for this, using plain HTML and having it simple is like asking for black white (well its asking for the impossible really, HTML is static, animated stuff by design is not).
Take some time out, learn the basics of JQuery, and do a couple of the meeeelions of JQuery examples/tutorials out there, and you'll be well on your way.
Seriously, if you've got any interest in this sort of stuff (and clearly you have), then JQuery is by far and away the simplest and easiest way to go... and it can be done in just a few lines of code.

http://www.google.co.uk/search?q=jquery+image+slider

 

[_Logie]

I love jQuery. The best Javascript library out there for both designers and developers.

 

[conneh]

Could look into iframes, although they are pretty basic.

 

[Revels]

Cheers for the replies guys.

Yeah, I just want the slide effect. Few images in there and you can scroll left/right to reveal more without having to have them all in the page.

I've used jQuery before but this is for a WordPress blog, so not sure if you can copy the code into the post box?

It won't be on the main page as such, just inside a few posts now and again.

 

[Addicted]

is it on wordpress.org or is it the script you've installed on some hosting?
pretty sure it allows you to implement "code" (php/html/css) into posts with a checkbox if you are using the script, not sure about a blog hosted by them though

 

[Revels]

It's a self hosted one.

I'm just making it for someone else to use, so it needs to be as simple as possible.

 

[dt2703]

Not used Wordpress myself but AFAIK it's JQuery compatible...

First two hits in google:

http://www.1stwebdesigner.com/wordpress/best-wordpress-image-plugins/
http://wordpress.org/support/topic/vslider-wordpress-image-slider-plugin/

 

[Adam.]

Have you considered a plug-in then?

vSlider looks like it has potential.

 

[Revels]

All those are on the front/other pages. This needs to be inside a post.

Adam, I'll go look at that. Ta.

 

[Revels]

Plugin doesn't work

Let me try and explain a bit better.

There's a form which any user can fill in. This then goes into a post. Simple enough.

The variables from the form are set to display in the post.

So you get something like... 'Hello, my name is {name} and this is my post about {topic}' etc etc.

There is also the option to upload some images. Which then also appear in the post. Now atm I have them set to appear 2x2 but I'd prefer them in the slider thing. But I need the code to be there, so that I can change the image URL to {image1} etc etc so that they display for each submission and not have to be manually changed. All the gallery option things I find have to be set up first or put on the home page etc. What I want should be simple but the more complex options are what the searches seem to bring me.

 

[Mitchell]

A Div containing the images that scrolls on overflow possibly?
So in the css
.sliderbox{overflow:scroll; height: (height of thumbnails); width: (width of post pane)}
.sliderbox img{float:left;} (to make them sit side by side)

in the html
<div class="sliderbox"> images in here </div>

Won't be as pretty as the iTunes slide bar, but same function in theory?
Also not sure how easy to make it put the images into a div with class of sliderbox automatically?

 

[Cup_Phil]

You don't want the code to be in the page mate

What you want to do is output the images into an unordered list

<ul id="imageScroller">
<li><img src="..." /></li>
<li><img src="..." /></li>
...... etc..
</ul>

Then enable jquery on wordpress (this is fairly simple to do) and include a jquery plugin for the effect
Then in the header just do a jquery document onload function to apply it to the relevant list

If you get stuck throw me a PM (or I'm on GTalk etc..) when I'm at home mate - I've written a fair few jquery and wordpress plugins in the past lol

 

[Birdie*]

Do you want to be able to style the scroll bar? I'm not sure how simple you want it but if you want it really simple you can just use:

<div style="width: 100px; height: 100px; overflow: scroll;">
{image1} etc
</div>

that would create a scroll bar when anything goes over the div width/height?

Edit: Mitchell beat me

 

[Revels]

Do you want to be able to style the scroll bar? I'm not sure how simple you want it but if you want it really simple you can just use:

<div style="width: 100px; height: 100px; overflow: scroll;">
{image1} etc
</div>

that would create a scroll bar when anything goes over the div width/height?

We have a winner! LOL! Simple is best. Ace. Cheers bud.

Next question, I've got the images in there but they go vertically, is there any way to make them go horizontally?

 

[Birdie*]

We have a winner! LOL! Simple is best. Ace. Cheers bud.

Next question, I've got the images in there but they go vertically, is there any way to make them go horizontally?

Add style="float: left;" inside the <img /> you might want to add a margin-left in that style too so they space out a bit so like:

<img src="...." style="float: left; margin-left: 5px;" />

 

[Mitchell]

Add style="float: left;" inside the <img /> you might want to add a margin-left in that style too so they space out a bit so like:

<img src="...." style="float: left; margin-left: 5px;" />

Bang on, I would just put the CSS in external stylesheet but meh!

 

[Revels]

<div style="width: 100px; height: 100px; overflow: scroll;">
<img src="{image1}{image2}{image3}" style="float: left; margin-left: 5px;" />
</div>

So something like that?

 

[Birdie*]

Yeah inline is old school but he just wanted simples :rasp:

 

[Birdie*]

<div style="width: 100px; height: 100px; overflow: scroll;">
<img src="{image1}{image2}{image3}" style="float: left; margin-left: 5px;" />
</div>

So something like that?

No it would need to be like

<div style="width: 100px; height: 100px; overflow: scroll;">
<img src="{image1}" style="float: left; margin-left: 5px;" />
<img src="{image2}" style="float: left; margin-left: 5px;" />
<img src="{image3}" style="float: left; margin-left: 5px;" />
</div>

 

[Mitchell]

<div style="width: 100px; height: 100px; overflow: scroll;">
<img src="{image1}{image2}{image3}" style="float: left; margin-left: 5px;" />
</div>

So something like that?

You have to add the styles to the images individually, so <img src="(image1)" style="float:left; margin-left:5px;"><img src="(image2)" style="float:left; margin-left:5px;"> etc etc

If you add this to the css file:
.sliderbox{overflow:scroll; height: 100px; width: 100px}
.sliderbox img{float:left; margin-left:5px}

you can simply set it out as the following in the HTML
<div class="sliderbox">
<img src="image1"><img src="image2"> etc
</div>

Hope that helps

 

[Revels]

Hmmms. It's still scrolling vertically. Meh. That might just have to be how it does it! Lol.

Thanks for you help gents.

 

[Birdie*]

Serious? lol, is it online anywhere so I can check/lol at your code

 

[dt2703]

Add "overflow-y:hidden" to prevent the vertical scroll.

So, in your example: <div style="width: 100px; height: 100px; overflow: scroll; overflow-y:hidden">

 

[Revels]

I'm just working locally at the moment, so no oppertunity to laugh at my code! Lol..

<div style="width: 500px; height: 500px; overflow: scroll; overflow-y:hidden">
<img src="{image1}" style="float: left; margin-left: 5px;" />
<img src="{image2}" style="float: left; margin-left: 5px;" />
<img src="{image3}" style="float: left; margin-left: 5px;" />
<img src="{image4}" style="float: left; margin-left: 5px;" />
</div>

Gives me..

You can just about see the top of the second image..

 

[Will.]

Ignore me

 

[Cup_Phil]

Yuck!!!
You'll be lucky to get that to look consistant and/or work on every browser lol

Do it properly

 

[Revels]

I tried that, Will. No luck.

Phillip. I want simple and easy! Lol. This needs to be fairly automated, not setting up a library for each post etc. So this is perfect.

 

[dt2703]

The overflow-y:hidden style will prevent the vertical scrollbar from showing, but if your images are stacked up on top of eachother its not going to work, they'll just be unreachable. You're putting them in a div thats 500x500, so even with the float:left, the fact that they don't fit in a 500x500 box skews your code. You need a div thats wide enough for all 4 images, but only high enough for 1.

 

[dt2703]

Plus you need to take into account your margins (also, you only need to set left and right margins, but lets not confuse things)

 

[Mitchell]

The overflow-y:hidden style will prevent the vertical scrollbar from showing, but if your images are stacked up on top of eachother its not going to work, they'll just be unreachable. You're putting them in a div thats 500x500, so even with the float:left, the fact that they don't fit in a 500x500 box skews your code. You need a div thats wide enough for all 4 images, but only high enough for 1.

Good point, didnt think of this.
Put all of the images within 1 long div, which will fix this.

ie <div style="width: 500px; height: 500px; overflow: scroll; overflow-y:hidden">
<div style="width:9999px;"> (doesn't matter how long, will automaticall trim down, as long as it is long enough to fit all images in 1 line)
<img src="{image1}" style="float: left; margin-left: 5px;" />
<img src="{image2}" style="float: left; margin-left: 5px;" />
<img src="{image3}" style="float: left; margin-left: 5px;" />
<img src="{image4}" style="float: left; margin-left: 5px;" />
</div>
</div>

 

[Birdie*]

I've cracked it :approve:

<div style="width: 500px; height: 500px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
<img src="{image1}" style="display: inline-block; margin-left: 5px;" alt="" />
<img src="{image2}" style="display: inline-block; margin-left: 5px;" alt="" />
<img src="{image3}" style="display: inline-block; margin-left: 5px;" alt="" />
</div>

 

[Mitchell]

I've cracked it :approve:

<div style="width: 500px; height: 500px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
<img src="{image1}" style="display: inline-block; margin-left: 5px;" alt="" />
<img src="{image2}" style="display: inline-block; margin-left: 5px;" alt="" />
<img src="{image3}" style="display: inline-block; margin-left: 5px;" alt="" />
</div>

That should work too i think! I was just messing about with colored divs

 

[Revels]

I'm so hopeless! Lol.

<div style="width: 2500px; height: 500px; overflow: scroll; overflow-y:hidden">
<img src="{image1}" style="float: left; margin-left: 5px;" /><img src="{image2}" style="float: left; margin-left: 5px;" /><img src="{image3}" style="float: left; margin-left: 5px;" /><img src="{image4}" style="float: left; margin-left: 5px;" />

Gives me..

 

[Birdie*]

This is going the same way as teaching gally to print screen lol.

do this


<div style="width: 500px; height: 500px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
<img src="{image1}" style="display: inline-block; margin-left: 5px;" alt="" />
<img src="{image2}" style="display: inline-block; margin-left: 5px;" alt="" />
<img src="{image3}" style="display: inline-block; margin-left: 5px;" alt="" />
</div>

display: inline-block; instead of float lefts and add the white-space: nowrap bit.

 

[Revels]

This is going the same way as teaching gally to print screen lol.

LOL

Good point, didnt think of this.
Put all of the images within 1 long div, which will fix this.

ie <div style="width: 500px; height: 500px; overflow: scroll; overflow-y:hidden">
<div style="width:9999px;"> (doesn't matter how long, will automaticall trim down, as long as it is long enough to fit all images in 1 line)
<img src="{image1}" style="float: left; margin-left: 5px;" />
<img src="{image2}" style="float: left; margin-left: 5px;" />
<img src="{image3}" style="float: left; margin-left: 5px;" />
<img src="{image4}" style="float: left; margin-left: 5px;" />
</div>
</div>

That works! But.. (lol) it doesn't automatically trim down. The images are on one line but theres still loads of white space..

 

[Birdie*]

That works! But.. (lol) it doesn't automatically trim down. The images are on one line but theres still loads of white space..

Do my one I've even tested it with the pictures, it will resize to whatever amount of picture you have and I wasted 15 minutes of my lunch trying to make it work lol