Hi,I'm new here and in awe of you guys and gals! Fortunately, I already have a wonderful web site that was made for me by a very nice young man just out of college. Unfortunately, he has moved out of the area and I have been unable to contact him. I'm an artist and I need advice on how to add a simple, basic "Image Gallery"? to one of the pages of my site. I need one image at a time per page with a < (previous) arrow to the left of the centered painting and a > (next) arrow to the right. Under the painting I would like four lines of text describing the work (title, material, size, and price. Which forum do I go to for this information? Thank you very kindly for your help as I am not knowledgeable in web site design. I know how to access my HTML web pages and change text, paste a few lines of code or add a link, but that's it. I have not added my web site address because I'm not sure if it's appropriate to do so. If requested, I will be happy to do so if it helps to solve my problem. Thank you all for any kind advice you give me. Respectfully, Tony

It's fine to post a link, so please do. If you are happy for this to be pretty simple and basic, it won't be hard for you to do, and we can talk you through it. This forum is fine for the purpose.

My web site is www.antoniobranco.com if you click on Originals on the top navigation bar you'll open up the page I want the Image gallery to be on.Again, any and all help will be greatly appreciated.Tony

There are lots of nice slideshow scripts out there that are pretty easy to set up and are free. Firstly, though, tell us as much about the gallery as possible. For example,

- will the images always be the same height and width? - are you happy for each next image to slide in from the right, or would you prefer each next one to fade in?I'm trying to work out which would be the best gallery option to go with.

If it helps, the ratio range of my work falls in between 1 x 1.25 (a 24" wide x 30" high painting) to 1 x 1.62 (a 48" wide x 78" high painting).A slide in from the right would be perfect.Thanks for your help,Tony

<ul class="bxslider">
<li>
<div><img src="/images/730_200/hill_fence.jpg" /></div>
<div>This is a caption, and some other useful information about this work of art.</div>
</li>
<li>
<div><img src="/images/730_100/tree_root.jpg" /></div>
<div>This is a different caption, and some other useful information about this work of art.</div>
</li>
<li>
<div><img src="/images/730_150/me_trees.jpg" /></div>
<div>This is a totally different caption, for a different work, and some other useful information about this work of art.</div>
</li>
</ul>

It would then need plenty of styling, but that's a later issue.

It's quite easy to set up a slider like this. Have a look at the instructions that come with it, download the files and have a play around, and let us know if you need any help.

Thanks Ralph,Ok, here goes. I don't know why but when I download the files on the site you gave me I can't open them. Obviously, I'm doing something wrong. Anyway, I tried clicking on the "view source" on my mouse and I printed out the code from the page on the screen. I've printed it below. I know I'll need to change titles and text to fit my page but, is this the basic general code that I need to start playing with?Two things I definitely want: infinite loop (so that when I click next on the last image I go back to the first one) and four captions under the image.Tony

Hi, I've been working on this for awhile. Sorry for the delay, but it seems so complicated to me. Before I even attempt to insert this into my web site can you please tell me if I'm going in the right direction? Thanks a million. Tony

You've got a long way to go, there, but you've sort of got the idea. I've attached some working files for you to help you get started. Download the link below and double click on it to open it. inside, you'll find two main files:

test.htmlindex.html

Double click on test.html to see just the slider in action, and then double click on index.html to show a rough example of it embedded in your page.

I've made the rough changes you suggested ralph. See my Originals page for the results : ) ...Again I thank you for all your help....I could never do this by myself.....It's back to the art studio for me...I eagerly await the next move...regards...tony

I would go with a ready made image gallery with an admin, and just insert it into my site, and upload photos through the admin area, like SimpleGallery or any other script. Google for this, there are plenty of options on Google.

The code I posted above showed how to get it up and working, but you missed some of the cues, I guess. For example, in your HTML you included the link to the bxslider.css file, but you didn't think to upload the bxslider.css file, it would seem. The same with the bxslider.js file and the jquery.js file. Make sure to upload all the files in that folder I sent you to the same folder ans the original.html page. They are all needed.

......Make sure to upload all the files in that folder I sent you to the same folder ans the original.html page. They are all needed.

Thanks for being patient.....On my FTP File Manager Page on my host site (Go Daddy)I was able to upload into the directories files... bx_loader.gif, controls.png, and little_blonde girl.jpg and mother.jpg to the IMG folder. I uploaded....bxslider.js and jquery.js into the JS folder.....and finally the bxslider.css and styles.css into theCSS folder.....I tried and tried but couldn't figure out how to upload any of these files into the HTML code of the Originals page....am I getting closer?...Tony

Incredible!!!..I just checked my Originals page and there's an image there!!!...I know most of you guys are laughing right about now and I don't blame you, but any success, even if by accident, is welcomed....signed _frustrated but happily painting in NY..tony

I was able to upload into the directories files... bx_loader.gif, controls.png, and little_blonde girl.jpg and mother.jpg to the IMG folder. I uploaded....bxslider.js and jquery.js into the JS folder.....and finally the bxslider.css and styles.css into theCSS folder...

Hi Tony. I was trying to make this as easy for you as possible, so I said:

upload all the files in that folder I sent you to the same folder ans the original.html page

I guess that wasn't clear, but I was telling you to take all those files that are in the one folder I sent you and put them in one folder on your server—the folder where your Originals page is. (I often have trouble getting people to read instructions. . My graphic designer never reads anything I write, no matter how carefully I write my instructions.)

Anyhow, ultimately it's better to put them all where you did put them, but now we have to tell your Originals page where they actually are, because it isn't designed to guess.

That href bit is a "path" to the css file. It is saying, "look in side the same folder as this originals.html file and find the bxslider.css file". The browser looks, and says "o hell, I can't find it!"

So you have to change that path.Now, look at the link to your bootstrap.css file:

Now, once again, the browser is saying "huh?" That's because those files are not where you are saying they are. You need to tell the browser where to find them, so if you have them, say, here—http://www.antoniobranco.com/js/bxslider.js—then you need to update the path just as you did for the CSS files.

For the images, you rightly placed the little girl image in the images folder and told your browser about it:

<img src="<font color='"#FF0000"'>images/</font>little_girl.jpg" />

So make sure to do the same for the other gallery images.

But there are some other images that your CSS file links to. In the bxslider.css file, you have this:

Each of those red paths is now wrong (because those images are not inside the CSS folder, where those links are pointing), so you have to change them. There are two options. The easiest way is to add an extra / at the start of each one. E.g.

url(<font color='"#FF0000"'>/</font>images/bx_loader.gif)

The alternative is to add this at the start of each path: ../

url(<font color='"#FF0000"'>../</font>images/bx_loader.gif)

But the first option is easier and a bit more reliable, so I'd go with that.

===============================

OK, so I've given a lot of advice here, my my expectation is that you won't read it very carefully ... but PLEASE DO! If things don't work, read it again, and again, and again! Because I find most people just skim, and then get into a mess, and I have to spend a lot more time than I should have to repeating myself. If I've left anything out, or made a mistake, at lest you've know it wasn't your fault that it didn't work.

Hi Ralph, I read your message several times and have tried to follow your directions to the letter. I made the changes you advised, including the ones in the bxslider.css file. I changed all five of them from url(images/bx_loader.gif) etc. to url(/images...). I also changed the img src="---" from img src="images" to img src="img" because that's where my gallery images will be. I am currently re-reading everything over and over. Regards, Tony

Ralph, One more thing I forgot to add...in the HTML code in the Originals page......do lines 114-120 belong here at the end of the document, or does this section of code belong on top in the <head> section? I keep going over this in my head and I'm thinking it should be inserted somewhere just above the beginning of the <img src="img/little_girl.jpg" />. Isn't this the code for how the images slide in from the right or am I crazy? Also line 114 has the following green colored code which I did not type in but the "system" ? added in //<! [CDATA [line 120 also has the following green code // ] ] again, not typed by me. Tony