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

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.

Hi,

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



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



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

.picture-slides-image-text{

}
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

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

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.


.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

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.


<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

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.virginmedia.com/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

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.

You could go a long way here with CSS. For example, try adding these styles to the end of your style sheet:


.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)

<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

<script>
var holder = document.querySelector("div.picture-slides-image-text");
var lineBreaker = '&#8212;';
var replacement = lineBreaker + '<br>';

var re = new RegExp(lineBreaker, 'ig');

holder.innerHTML = holder.innerHTML.replace(re, replacement);
</script>
</body>

That will produce this:


SALVATION ARMY IHQ &#8212; 
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

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

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

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.virginmedia.com/portfolio.html

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:

text : "Salvation Army IHQ. Sheppard Robson/Chadwick International. 2004"

Needs a JS person.

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

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

Cheers.