Adding text box into existing page

[theremotedr]

Evening,
Here is the page http://www.theatticbanwell.co.uk/slideshow.html

I would like to be able to make use of the space to the right of the main image.
I would like to add a text box so I can add some information about the current image loaded.
Could you advise how I could insert this.

As you then scroll through the images it’s respective information would also be shown.

This would only apply for pc at present.

[mlegg]

That slideshow takes up the full width, you would have to make columns and have the slider on the left column and put text in the right column.

[theremotedr]

Hi,
I was thinking something along the lines like so,

[theremotedr]

Hi,
Here is my effort so far, please take a look http://www.theatticbanwell.co.uk/slideshow.html

I have placed the main image where i think i need it to be.
i have then made an edit to the text which should be centered below it.

Can you advise how i place a text box to the right of this main image.

Thanks

[coothead]

Can you advise how I place a text box to the right of this main image.

I did not think that to be a reasonable or easily coded idea,
so made something that should work on all devices.

Check out the attachment and follow the simple instructions.

coothead

[theremotedr]

Evening,
Ok ive applied that and now see the text box above the main image,thanks very much.

Before i start adding text i have noticed something so best i mention before i start.

I will add / delete items as they become sold or for sale meaning my thumbnail images are named at present 194, 195, 196 ,197 etc etc
As 195 becomes sold i will delete it.

As something becomes ready for sale and lets say there are another 3 photos i will then continue from the last number so it will be 198, 199, 200
Currently the numbers in the js file represent the slide position number so the 3rd image is my photo named 100

Does this matter or not,i mean will any of your code be damaged etc ?
Does this make sense ?

If i select the first thumbnail and then use the arrows on my keyboard i see the image change no problem but the text doesnt change.

Selecting the thumbs or selecting the arrows on the screen etc by using the mouse works fine.

Many thanks

[coothead]

Hi there theremotedr,

The code does not involve the images at all.

I was unaware about the keyboard activation, but will look that for you.

coothead

[theremotedr]

Hi,
I also see another issue.
Please can you do this to see the issue.
We are looking at the text in the text box.

In the html file you have wrote <div id="info">This is the first image of 88 <br> in the gallery slider.</div>

Then in the js files i have done this,

               '1 Welcome to The Attic Banwell where you can find Furniture & Shabby Chic items.',
               '2 Heading away from Morissions,going down Wolvershill rd, go over M5 then turn right.',
			   '3 This is slide 3',
			   '4 This is slide 4',
			   '5 This is slide 5',
			   '6 This is slide 6',
			   '7 This is slide 7',
			   '8 This is slide 8',
			   '9 This is slide 9',

Here we go,
Please refresh screen,
The first image is shown & the text show is <div id="info">This is the first image of 88 <br> in the gallery slider.</div>

Now click the arrow to the right of the main image.
Now image 2 is shown BUT sometimes the text is shown still for image 1.
So now click the back button to the left of the main image.
It now reads what i wrote in the js file 1 Welcome to The Attic Banwell where you can find Furniture & Shabby Chic items.

[coothead]

Hi there theremotedr.

in the html file it should be...

                <div id="info-holder">
                 <div id="info">1 Welcome to The Attic Banwell where you can find Furniture & Shabby Chic items.</div>
                </div>

...which now matches this...

   var info = [
               '1 Welcome to The Attic Banwell where you can find Furniture & Shabby Chic items.',
               '2 Heading away from Morissions,going down Wolvershill rd, go over M5 then turn right.',

...in the js file

Here is the amended javascript file.

coothead

[theremotedr]

Coothead many thanks for that,seems to have done the trick.

My question is now how to somehow link the text in the js file to the code in the html file.
When i say link i mean i need to somehow have a connection between the two for when i add the information etc.

This isnt easy to explain by writing here but if i had an invisible note in the html file & js file next to where i type then i know when i am typing its for the correct photo etc.

Did i explain correctly or did i get you lost ??

Thanks for the help so far.