SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  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
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 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
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 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
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 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 Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 &rarr;',
    prevText: '&larr; 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 &rarr;',
    prevText: '&larr; Go back'
    });</code></pre>

    <h4>HTML/h4>
    <pre><code data-language="html">&lt;ul class=&quot;bxslider&quot;&gt;
    &lt;li&gt;&lt;img src=&quot;&#x2F;images&#x2F;730_200&#x2F;hill_trees.jpg&quot; &#x2F;&gt;&lt;&#x2F;li&gt;
    &lt;li&gt;&lt;img src=&quot;&#x2F;images&#x2F;730_200&#x2F;me_trees.jpg&quot; &#x2F;&gt;&lt;&#x2F;li&gt;
    &lt;li&gt;&lt;img src=&quot;&#x2F;images&#x2F;730_200&#x2F;houses.jpg&quot; &#x2F;&gt;&lt;&#x2F;li&gt;
    &lt;&#x2F;ul&gt;

    &lt;div class=&quot;outside&quot;&gt;
    &lt;h3&gt;This div is outside of the slider&lt;&#x2F;h3&gt;
    &lt;p&gt;&lt;span id=&quot;slider-prev&quot;&gt;&lt;&#x2F;span&gt; | &lt;span id=&quot;slider-next&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;p&gt;
    &lt;&#x2F;div&gt;</code></pre>

  8. #8
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 &rarr;',
    prevText: '&larr; 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>

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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!

    bxslider.zip

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

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Cool. Let us know how you go.

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

  13. #13
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,429
    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.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 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.

  15. #15
    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

  16. #16
    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

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 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.

  18. #18
    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

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

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

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

    Code:
    <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>
    </ul>
    </div>
    <ul>
            <li>
              <div><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>
              </div>
            </li>
    </ul>
    <ul>
            <li>
              <div><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>
              </div>
          </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.

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    By the way, Tony, there are some images that go with the slider, such as a loading button and the back and forth buttons, and the paths to them are wrong now. In your bxslider.css file, make sure the links to each image are correct. E.g.

    images/bx_loader.gif

    is wrong now, because you changed the name of the images folder. See my long post above which highlights the important bits and the lines they are on. (See what I mean by reading really carefully? )

  22. #22
    SitePoint Member
    Join Date
    May 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    By the way, Tony, there are some images that go with the slider, such as a loading button and the back and forth buttons, and the paths to them are wrong now. In your bxslider.css file, make sure the links to each image are correct. E.g.

    images/bx_loader.gif

    is wrong now, because you changed the name of the images folder. See my long post above which highlights the important bits and the lines they are on. (See what I mean by reading really carefully? )
    Ralph, It's almost there!!! but, I screwed up ...it's not your fault! I didn't change the name of the image folder. There are in fact, two different folders. One is named images and contains the following files:
    bg-tile/jpg
    bx_loader.gif
    controls.png
    little_girl.jpg

    The other folder is named img and it contains the following files:
    boa_cover.jpg
    bx_loader.gif
    controls.png
    glyphicons-halflings-white.png
    glyphicons-halflings.png
    little_girl.JPG
    little_girl.jpg
    mother.JPG
    mother.jpg

    I have no idea why there's duplicates other than I screwed up while downloading. Hope this helps.
    Also, I tried several times to delete the green code on lines 106 and 112... // <! [CDATA[ and // ]] but the system refuses to erase them......
    I know I'm giving you a lot here, but can you also tell me how to make the images smaller so that the viewer doesn't have to scroll down to see the text and controls? I tried inserting height="50%" .. then later "30%" but alas, no visible change. Also how do I center than image? it seems off center... Again, I'm indebted to you immensely for you kindness and help... Tony, "the elated artist in NY thrilled at finally seeing his artwork sliding across his computer screen!!!!"..... Thanks to Ralph

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The left and right arrows aren't working because the controls.png image isn't actually in the /img/ folder, despite what you mentioned above. E.g.

    http://www.antoniobranco.com/img/controls.png

    This link bombs out, so make sure the image is actually in place.

    The slider is working even with the // <! [CDATA[ and // ]] stuff in there, so just ignore it. )It's really for a different type of document, but isn't doing any harm.)

    To make the images smaller, you can either resize them before uploading them (say, with Photoshop). I think there are online tools for doing this too, though I'm not sure. The alternative is to set different sizes for them explicity, either in CSS or HTML. For example, in the HTML you can do this:

    Code:
    <img alt="Little Blonde Girl" src="img/little_girl.jpg" height="200">
    That makes it quite small, but is just an example of what you can do.

    To center the gallery,go to styles.css line 53 and replace this:

    Code:
    #primary {
    margin: 0 270px 0 0;
    position: relative;
    }
    with this:

    Code:
    #primary {
    margin: 0 auto;
    position: relative;
    width: 800px;
    }


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
  •