SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gallery Layout Advice

    Hello

    Not sure if this question is suitable for this part of the forum.

    The jquery gallery on my website is gradually taking shape - on the portfolio page - can someone tell me how i can insert a line break on the image description text on the right hand side please? Also, both the image and the text seem to be right justified - how can I alter this to be centered?

    www.ptaplin.webspace.virginmedia.com

    Many thanks

    Paul

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    To be honest, you've lost me on both questions. Could you elaborate? Looking at your site in Chrome, it seems to do exactly what you want.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you mean you don;t want the text to go over the image then set a width for it here.

    Code:
    .picture-slides-image-text{width:300px}
    The image and the text are both absolutely laced using a right position so just adjust that right position if you want to move them over a bit more (ore use left instead of right).
    e.g.

    Code:
    .picture-slides-image-text{  right: 132px;}
    .picture-slides-fade-container a {right: 600px}
    It all depends on how big the images will be and how much space you need to allocate.

  4. #4
    SitePoint Member kushal.azza's Avatar
    Join Date
    May 2013
    Location
    India
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .picture-slides-image-text{
    CSS Help.PNG
    }
    make this changes in your CSS file.
    Your problem of Image description and "NEXT/PREVIOUS" problem will be solved and your portfolio will look good.

    If any help needed feel free to ask

  5. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, just got back to this - thanks for all the responses.

    Hi Paul, yes, soon after I posted the question I realized why the images and text are right justified - as you say, because I'm using the 'right position'. DOH! I'm an idiot sometimes. Just wondering, seeing as the images are differing widths is there a way of making them all appear 'centered' from one specific point on the horizontal? I don't know if that makes any sense?

    Hi Ralph, you'll see I took your advice from the last time you helped me - I finally managed to get some structure into my site. If you look at the text that describes each image, just below the 'next/previous', I just wanted to know how I could break that up into, say, two lines instead of one. Some of those descriptions are quite long and for some of them I'm thinking I might like to split them into two lines.

    I assume it happens somewhere here on my portfolio mark up page:

    {
    image : "pictures/G5.jpg",
    alt : "Picture 5",
    text : "Salvation Army IHQ. Sheppard Robson/Chadwick International. 2004"
    },

    Cheers. Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Kristeva View Post
    Hi, just got back to this - thanks for all the responses.

    Hi Paul, yes, soon after I posted the question I realized why the images and text are right justified - as you say, because I'm using the 'right position'. DOH! I'm an idiot sometimes. Just wondering, seeing as the images are differing widths is there a way of making them all appear 'centered' from one specific point on the horizontal? I don't know if that makes any sense?
    Hi,

    It's a little hard to guess exactly what you want but you can set a width for the image container and then centre the image in that width.

    e.g.
    Code:
    .picture-slides-fade-container a {
    width:400px;/* adjust to suit*/
    text-align:center;
    background:red;/* for testing only */
    }
    
    .picture-slides-fade-container a img{
    display:inline;
    }
    To make the text description wrap to two lines you can use the code I gave you before but it does depend on what you are trying to achieve exactly.

  7. #7
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    It's a little hard to guess exactly what you want but you can set a width for the image container and then centre the image in that width.

    e.g.
    Code:
    .picture-slides-fade-container a {
    width:400px;/* adjust to suit*/
    text-align:center;
    background:red;/* for testing only */
    }
    
    .picture-slides-fade-container a img{
    display:inline;
    }
    To make the text description wrap to two lines you can use the code I gave you before but it does depend on what you are trying to achieve exactly.
    Thanks Paul, the above code works great - the images all appear centered in relation to one another.

    I can see what you mean about using the code to wrap the image description to 2 lines by setting a set width, but how might I split the line exactly and individually - for example say I wanted 'Salvation Army IHQ' on the first line and the name of the architect and date on the next line? I could use your method within the code by setting a width but that wouldn't work for the next description - for example, 'Lightbox' on the first line, etc. On the portfolio page can I split some of the text descriptions up into 2 lines?

    Paul

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Kristeva View Post
    Thanks Paul, the above code works great - the images all appear centered in relation to one another.

    I can see what you mean about using the code to wrap the image description to 2 lines by setting a set width, but how might I split the line exactly and individually - for example say I wanted 'Salvation Army IHQ' on the first line and the name of the architect and date on the next line? I could use your method within the code by setting a width but that wouldn't work for the next description - for example, 'Lightbox' on the first line, etc. On the portfolio page can I split some of the text descriptions up into 2 lines?

    Paul
    You'd have to separate the text into 2 elements if you want to control each element separately. Or you could just add a break into the mix at the correct point.

    Code:
    <div class="picture-slides-image-text">Salvation Army IHQ.<br> Sheppard Robson/Chadwick International. 2004</div>

  9. #9
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You'd have to separate the text into 2 elements if you want to control each element separately. Or you could just add a break into the mix at the correct point.

    Code:
    <div class="picture-slides-image-text">Salvation Army IHQ.<br> Sheppard Robson/Chadwick International. 2004</div>
    sorry Paul, can you give me an idea as to where I'd place the above code? I've tried the various positions on my 'portfolio' page and it either overlays the original text, or it disrupts other elements on the page.

    Thanks

    Paul

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Kristeva, can you please post a link to your site or a link to a test page with relevant code that demonstrates the problem?

    Thanks.

  11. #11
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Kristeva, can you please post a link to your site or a link to a test page with relevant code that demonstrates the problem?

    Thanks.
    Hi

    this is where I'm at so far:

    http://www.ptaplin.webspace.virginme...portfolio.html

    On the portfolio page I just wanted to know how to spread the image text/details over 2 lines instead of just 1. Paul offered some code above but I can't seem to get it to work.

    Thanks


    Paul

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The link is good. It explains that the text that you are displaying beneath and to the right of the slide images is part of the jQuery call for that image. Changing the behavior of that text requires someone with jQuery or JavaScript experience who can effectively insert a line-break within the text string.

    @ralph.m can decide whether to move this message to the JavaScript forum or post a solution here.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could go a long way here with CSS. For example, try adding these styles to the end of your style sheet:

    Code:
    .navigation-controls {
        width: 100%;
        left: 0;
        text-align: center;
    }
    
    .picture-slides-image-text {
        width: 340px;
        left: 50%;
        margin-left: -170px;
    }
    To insert a line break in that text, you could add this script to the bottom of your page (just before the closing </body> tag)

    Code javascript:
    <script>
    var holder = document.querySelector("div.picture-slides-image-text");
    var lineBreaker = 'IHQ.';
    var replacement = lineBreaker + '<br>';
     
    var re = new RegExp(lineBreaker, 'ig');
     
    holder.innerHTML = holder.innerHTML.replace(re, replacement);
    </script>
    </body>

    This code only applies to this particular example, so is not really all that useful in the long run. If there's a pattern in your subtitles, it would be better to match that instead. For example, choose a special character to target that you will only use where you want a line break. E.g. if there's always a point where you want to break your text, you could, say, use an em dash: —

    SALVATION ARMY IHQ — SHEPPARD ROBSON/CHADWICK INTERNATIONAL. 2004
    Code javascript:
    <script>
    var holder = document.querySelector("div.picture-slides-image-text");
    var lineBreaker = '—';
    var replacement = lineBreaker + '<br>';
     
    var re = new RegExp(lineBreaker, 'ig');
     
    holder.innerHTML = holder.innerHTML.replace(re, replacement);
    </script>
    </body>

    That will produce this:

    Code:
    SALVATION ARMY IHQ — 
    SHEPPARD ROBSON/CHADWICK INTERNATIONAL. 2004
    Last edited by ralph.m; Jun 5, 2013 at 17:33.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could go a long way here with CSS. For example, try adding these styles to the end of your style sheet:

    Code:
    .navigation-controls {
        width: 100%;
        left: 0;
        text-align: center;
    }
    
    .picture-slides-image-text {
        width: 340px;
        left: 50%;
        margin-left: -170px;
    }
    To insert a line break in that text, you could add this script to the bottom of your page (just before the closing </body> tag)

    Code javascript:
    <script>
    var holder = document.querySelector("div.picture-slides-image-text");
    var lineBreaker = 'IHQ.';
    var replacement = lineBreaker + '<br>';
     
    var re = new RegExp(lineBreaker, 'ig');
     
    holder.innerHTML = holder.innerHTML.replace(re, replacement);
    </script>
    </body>

    This code only applies to this particular example, so is not really all that useful in the long run. If there's a pattern in your subtitles, it would be better to match that instead. For example, choose a special character to target that you will only use where you want a line break. E.g. if there's always a point where you want to break your text, you could, say, use an em dash:



    Code javascript:
    <script>
    var holder = document.querySelector("div.picture-slides-image-text");
    var lineBreaker = '';
    var replacement = lineBreaker + '<br>';
     
    var re = new RegExp(lineBreaker, 'ig');
     
    holder.innerHTML = holder.innerHTML.replace(re, replacement);
    </script>
    </body>

    That will produce this:

    Code:
    SALVATION ARMY IHQ  
    SHEPPARD ROBSON/CHADWICK INTERNATIONAL. 2004
    Thanks Ralph

    I incorporated your changes:

    www.ptaplin.webspace.virginmedia.com

    Have I made a mistake? It doesn't seem to be breaking the line. I guess I must have.

    Paul

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Paul. You haven't really followed much (if anything) of what I posted above. You didn't use either the CSS or the JS. Did you post a link to the wrong page?

    I suggested some CSS above, but it's not on your page. I also suggested adding that JavaScript code at the bottom of the page, just before the </body> tag, but it's not there.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  16. #16
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi Paul. You haven't really followed much (if anything) of what I posted above. You didn't use either the CSS or the JS. Did you post a link to the wrong page?

    I suggested some CSS above, but it's not on your page. I also suggested adding that JavaScript code at the bottom of the page, just before the </body> tag, but it's not there.
    Hi Ralph, that's odd - when I click on my link above it's all there. The image text is now directly beneath the image, which I assume was part of your tweak in CSS and when I click 'view source' I can see the JS script at the bottom of the 'portfolio' page just before the closing </body> tag.

    I'm viewing in safari. Apologies for that, let me know if you still can't see the changes and I'll have another go at posting a link.

    Paul

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I think Kristeva's last link may point to the wrong page. Kristeva has posted two links to different pages. The page with the slider and Ralph's JavaScript is:
    http://www.ptaplin.webspace.virginme...portfolio.html

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Thanks Ron. Seems the jQuery gets in the way of the JS I posted somehow. Sign. I tried a few experiments of adding line breaks in the text lie, but no luck:

    Code:
    text : "Salvation Army IHQ. Sheppard Robson/Chadwick International. 2004"
    Needs a JS person.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  19. #19
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    I think Kristeva's last link may point to the wrong page. Kristeva has posted two links to different pages. The page with the slider and Ralph's JavaScript is:
    http://www.ptaplin.webspace.virginme...portfolio.html
    Thanks.

    My original link was good but it went to the front page of my site rather than the portfolio page. Apologies for any confusion.

    Should I now post this question in the JS section?

    Paul

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Kristeva View Post
    Should I now post this question in the JS section?

    Paul
    I have asked a moddie to move this thread into the JavaScript forum for continuity.

    Cheers.

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hopefully, one of the JavaScript wizards will give this a go for Kristeva. Seems to be an interesting challenge.

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    An alternative to this would be to use a better gallery script like bxSlider. It's much more accessible. Have a look at this thread, where I helped someone with a similar task:

    http://www.sitepoint.com/forums/show...Gallery-advice
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hey Kristeva, it occurred to me that my script might not be working because it tries to run before the jQuery has done its thing (and it needs to operate on the result of the jQuery). It seems to work if you delay the operation of the script a bit by changing it to this:

    Code:
    <script>
    window.onload = function() {
    var holder = document.querySelector("div.picture-slides-image-text");
    var lineBreaker = 'IHQ.';
    var replacement = lineBreaker + '<br>';
     
    var re = new RegExp(lineBreaker, 'ig');
     
    holder.innerHTML = holder.innerHTML.replace(re, replacement);
    };
    </script>
    Remember, though, that this version of the script will only work for the first image and caption, as it looks for 'IHQ.' If you want it to operate on all captions, try the more detailed option I posted after that (but remember to include the red bits above).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  24. #24
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hey Kristeva, it occurred to me that my script might not be working because it tries to run before the jQuery has done its thing (and it needs to operate on the result of the jQuery). It seems to work if you delay the operation of the script a bit by changing it to this:

    Code:
    <script>
    window.onload = function() {
    var holder = document.querySelector("div.picture-slides-image-text");
    var lineBreaker = 'IHQ.';
    var replacement = lineBreaker + '<br>';
     
    var re = new RegExp(lineBreaker, 'ig');
     
    holder.innerHTML = holder.innerHTML.replace(re, replacement);
    };
    </script>
    Remember, though, that this version of the script will only work for the first image and caption, as it looks for 'IHQ.' If you want it to operate on all captions, try the more detailed option I posted after that (but remember to include the red bits above).
    Thanks Ralph

    the first version worked well with the tweak, but as you say only on the very first image. I tried running your second version but unfortunately that doesn't seem to work.

    http://www.ptaplin.webspace.virginme...portfolio.html

    I've tweaked my site with a change of font, etc and I rather like the results with the image text on one line, but it would be nice to know how to break that line.

    I'll take a look at bxslider when i get a moment.

    Paul

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I think what you have should work. Make sure you are using the right character as the line breaker. I was using an em dash, rather than a normal dash. Try copying and pasting the — in the js code and pasting that into the HTML to make sure you are suing the right character. (I can type the em dash on the Mac by holding Shift + Option + -, but not sure what they keys are on a PC.)

    Or you could just use a normal dash instead:

    Code:
    var lineBreaker = '-';
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •