SitePoint Sponsor

User Tag List

Results 1 to 23 of 23

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Artist needs Image Gallery advice

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <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:

    Code:
    <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.

  7. #7
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  9. #9
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    ......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

  10. #10
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Tony NY View Post
    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.

    On your Originals page, for example, you now have this:

    Code:
    <link rel="stylesheet" href="bxslider.css" type="text/css" />
    <link rel="stylesheet" href="styles.css" 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:

    Code:
    <link href="http://www.antoniobranco.com/css/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:

    Code:
    <link rel="stylesheet" href="http://www.antoniobranco.com/css/bxslider.css" type="text/css" />
    <link rel="stylesheet" href="http://www.antoniobranco.com/css/styles.css" type="text/css" />
    or this

    Code:
    <link rel="stylesheet" href="/css/bxslider.css" type="text/css" />
    <link rel="stylesheet" href="/css/styles.css" 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:

    Code:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="bxslider.js"></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—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:

    Code:
    <img src="images/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:

    Code:
    background: url(images/bx_loader.gif) center center no-repeat #fff; /* line 56 */
    background: url(images/controls.png) no-repeat 0 -32px; /* line 105 */
    background: url(images/controls.png) no-repeat -43px -32px; /* line 110 */
    background: url(images/controls.png) -86px -11px no-repeat; /* line 148 */
    background: url(images/controls.png) -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.

    Code:
    url(/images/bx_loader.gif)
    The alternative is to add this at the start of each path: ../

    Code:
    url(../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.

  12. #12
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •