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
Hi Tony. Welcome to the forums. 
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
A nice option might be to go with bxslider: http://bxslider.com/examples/slideshow-adaptive-height
It has a lot of options, including text under each image. For example, you could modify the HTML code on that page from this:
<ul class="bxslider">
<li><img src="/images/730_200/hill_fence.jpg" /></li>
<li><img src="/images/730_100/tree_root.jpg" /></li>
<li><img src="/images/730_150/me_trees.jpg" /></li>
</ul>
to something like this:
<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
</div>
</aside>
<div id="primary">
<script type=“text/javascript”>
$(document).ready(function(){
$(‘.bxslider’).bxSlider({
nextSelector: ‘#slider-next’,
prevSelector: ‘#slider-prev’,
nextText: ‘Onward →’,
prevText: ‘← Go back’
});
});
</script>
<h1>Custom next / prev control selectors</h1>
<div class=“slider”>
<ul class=“bxslider”>
<li><img src=“/images/730_200/hill_trees.jpg” /></li>
<li><img src=“/images/730_200/me_trees.jpg” /></li>
<li><img src=“/images/730_200/houses.jpg” /></li>
</ul>
<div class=“outside”>
<h3>This div is outside of the slider</h3>
<p><span id=“slider-prev”></span> | <span id=“slider-next”></span></p>
</div></div>
<h4>JS:</h4>
<pre><code data-language=“javascript”>$(‘.bxslider’).bxSlider({
nextSelector: ‘#slider-next’,
prevSelector: ‘#slider-prev’,
nextText: ‘Onward →’,
prevText: ‘← Go back’
});</code></pre>
<h4>HTML:</h4>
<pre><code data-language=“html”><ul class="bxslider">
<li><img src="/images/730_200/hill_trees.jpg" /></li>
<li><img src="/images/730_200/me_trees.jpg" /></li>
<li><img src="/images/730_200/houses.jpg" /></li>
</ul>
<div class="outside">
<h3>This div is outside of the slider</h3>
<p><span id="slider-prev"></span> | <span id="slider-next"></span></p>
</div></code></pre>
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
</div>
</aside>
<div id="primary">
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
nextSelector: ‘#slider-next’,
prevSelector: ‘#slider-prev’,
nextText: ‘Onward →’,
prevText: ‘← Go back’
});
});
</script>
<h1>Custom next / prev control selectors</h1>
<div class="slider">
<ul class=“bxslider”>
<div align=center>
<li><div><img src="img/little_girl.jpg" alt="Little Blonde Girl" style="width: 30%;" />
<p>Little Blonde Girl</p>
<p>Oil on wood</p>
<p>30” x 24” / 76cm x 61cm</p>
<p>$ 10,000</p></div></li>
<!--</div>-->
<li><div><img src="img/mother.jpg" alt=”Mother” style=”width: 30;” />
<p>Mother</p>
<p>Black chalk on paper</p>
<p>15” x 11” / 38cm x 28cm</p>
<p>Not for sale</p></div></li>
</ul>
<div class="outside">
<h3>This div is outside of the slider</h3>
<p><span id=“slider-prev”></span> | <span id=“slider-next”></span></p>
</div></div>
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.html
index.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.
Hope that helps!
thanks ralph!..i’ll start working on this in the morning!..the sooner i get this done the sooner i can get back to painting…tony
Cool. Let us know how you go.
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.
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
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.
On your Originals page, for example, you now have this:
<link rel="stylesheet" [COLOR="#FF0000"]href="bxslider.css"[/COLOR] type="text/css" />
<link rel="stylesheet" [COLOR="#FF0000"]href="styles.css"[/COLOR] type="text/css" />
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:
<link href="[COLOR="#FF0000"]http://www.antoniobranco.com/css/[/COLOR]bootstrap.css" rel="stylesheet">
Aha! Your originals.html file is able to find that CSS file, because the path is pointing to the actual location of that file: it’s looking inside the /css/ folder, where that file actually lives!
So that’s what you need to do for bxslider CSS files. You can either do it likt this:
<link rel="stylesheet" href="[COLOR="#FF0000"]http://www.antoniobranco.com/css/bxslider.css[/COLOR]" type="text/css" />
<link rel="stylesheet" href="[COLOR="#FF0000"]http://www.antoniobranco.com/css/styles.css[/COLOR]" type="text/css" />
or this
<link rel="stylesheet" href="[COLOR="#FF0000"]/css/bxslider.css[/COLOR]" type="text/css" />
<link rel="stylesheet" href="[COLOR="#FF0000"]/css/styles.css[/COLOR]" type="text/css" />
You don’t actually need to include the domain name in those paths.
Now, of course, you are going to have to do that same for all the paths—to the JS files and to the images.
Your browser is trying to find your js files here:
<script type="text/javascript" [COLOR="#FF0000"]src="jquery.js"[/COLOR]></script>
<script type="text/javascript" [COLOR="#FF0000"]src="bxslider.js"[/COLOR]></script>
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—[noparse]http://www.antoniobranco.com/js/bxslider.js[/noparse]—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="[COLOR="#FF0000"]images/[/COLOR]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:
background: url([COLOR="#FF0000"]images/bx_loader.gif[/COLOR]) center center no-repeat #fff; /* line 56 */
background: url([COLOR="#FF0000"]images/controls.png[/COLOR]) no-repeat 0 -32px; /* line 105 */
background: url([COLOR="#FF0000"]images/controls.png[/COLOR]) no-repeat -43px -32px; /* line 110 */
background: url([COLOR="#FF0000"]images/controls.png[/COLOR]) -86px -11px no-repeat; /* line 148 */
background: url([COLOR="#FF0000"]images/controls.png[/COLOR]) -86px -44px no-repeat; /* line 163 */
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([COLOR="#FF0000"]/[/COLOR]images/bx_loader.gif)
The alternative is to add this at the start of each path: …/
url([COLOR="#FF0000"]../[/COLOR]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.
So, good luck.
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
Hi Tony. You’ve actually done well this time, so congratulations. You are nearly there.
Indeed, I was surprised it wasn’t working, but then noticed some errors in your HTML. For example, look at this code I gave you:
<ul class="bxslider">
<li><img src="images/little_girl.jpg">
<p>Little Blonde Girl</p>
<p>Oil on wood</p>
<p>30” x 24” / 76cm x 61cm</p>
<p>$ 10,000</p>
</li>
<li><img src="images/little_girl.jpg">
<p>Mother</p>
<p>Black chalk on paper</p>
<p>15” x 11” / 38cm x 28cm</p>
<p>Not for sale</p>
</li>
<li><img src="images/little_girl.jpg">
<p>Little Blonde Girl</p>
<p>Oil on wood</p>
<p>30” x 24” / 76cm x 61cm</p>
<p>$ 10,000</p>
</li>
<li><img src="images/little_girl.jpg">
<p>Mother</p>
<p>Black chalk on paper</p>
<p>15” x 11” / 38cm x 28cm</p>
<p>Not for sale</p>
</li>
</ul>
and what you have on your page:
<ul class="bxslider">
<li><img src="img/little_girl.jpg" />
<p>Little Blonde Girl</p>
<p>Oil on wood</p>
<p>30" x 24" / 76cm x 61cm</p>
<p>$10,000</p>
</li>
[COLOR="#FF0000"]</ul>
</div>
<ul>[/COLOR]
<li>
[COLOR="#FF0000"]<div>[/COLOR]<img src="img/mother.jpg" />
<p>Mother</p>
<p>Black chalk on paper</p>
<p>15" x 11" / 38cm x 28cm</p>
<p>Not for sale</p>
[COLOR="#FF0000"]</div>[/COLOR]
</li>
[COLOR="#FF0000"]</ul>
<ul>[/COLOR]
<li>
[COLOR="#FF0000"]<div>[/COLOR]<img src="img/old_man.jpg" />
<p>Old man</p>
<p>Black ink on paper</p>
<p>7.5" x 5.5" / 19cm x 14cm</p>
<p>$ 500</p>
[COLOR="#FF0000"]</div>[/COLOR]
</li>
</ul>
OK, so I’m calling on your keen artist’s eyes to spot the differences.
Those differences might not be causing the whole problem, but some of them are deal breakers. Might as well stick with what I’ve given you to start with, especially as it works.
As for the //<! [CDATA [ , yes, just delete is and try to keep that part of the code just as I gave it too.