Gallery Layout Advice

Hopefully, one of the JavaScript wizards will give this a go for Kristeva. Seems to be an interesting challenge. :slight_smile:

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:

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:

<script>
[COLOR="#FF0000"]window.onload = function() {[/COLOR]
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);
[COLOR="#FF0000"]};[/COLOR]
</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.virginmedia.com/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

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:

var lineBreaker = '-';

yeah sorry, i did wonder whether it might be something to do with wrong type of dash.

I’m wondering, is there a way of targeting a special character that could be rendered invisible on the page, in a situation when you didn’t want to have a character like a dash at the end of the line?

Paul

Even easier, you can just remove it altogether. Instead of adding a <br> to it, just replace it with a <br>:

<script>
window.onload = function() {
var holder = document.querySelector("div.picture-slides-image-text");
var lineBreaker = '-';
var replacement = '<br>';
 
var re = new RegExp(lineBreaker, 'ig');
 
holder.innerHTML = holder.innerHTML.replace(re, replacement);
};
</script>

I’ve just removed the ‘lineBreaker’ variable from here: var replacement = lineBreaker + ‘<br>’;

I’ve also changed the em dash to a normal hyphen (-) in the example above. Remember to do the same in the caption text. Here’s a working example of your page (works for me at least!):

<!DOCTYPE html> 
<html lang="en">
  <head>
    <title>Paul Taplin Photography Portfolio</title>
    <meta charset="utf-8"/>
    <link href="http://www.ptaplin.webspace.virginmedia.com/style1.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://www.ptaplin.webspace.virginmedia.com/js/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.ptaplin.webspace.virginmedia.com/js/PictureSlides-jquery-2.0.js"></script>
	<script type="text/javascript">
		jQuery.PictureSlides.set({
			// Switches to decide what features to use
			useFadingIn : true,
			useFadingOut : true,
			useFadeWhenNotSlideshow : true,
			useFadeForSlideshow : true,
			useDimBackgroundForSlideshow : true,
			loopSlideshow : false,
			usePreloading : true,
			useAltAsTooltip : true,
			useTextAsTooltip : false,
			
			// Fading settings
			fadeTime : 500, // Milliseconds	
			timeForSlideInSlideshow : 2000, // Milliseconds

			// At page load
			startIndex : 1,	
			startSlideShowFromBeginning : true,
			startSlideshowAtLoad : false,
			dimBackgroundAtLoad : false,

			// Large images to use and thumbnail settings
					images : [
				{
					image : "http://www.ptaplin.webspace.virginmedia.com/pictures/G1.jpg", 
					alt : "Picture 1",
					text : "Salvation Army IHQ - Sheppard Robson/Chadwick International. 2004"
					
				},
				{                                  
					image : "http://www.ptaplin.webspace.virginmedia.com/pictures/G2.jpg", 
					alt : "Picture 2",
					text : "The Lightbox. Marks Barfield Architects. 2007"
				},
				{                                  
					
					image : "http://www.ptaplin.webspace.virginmedia.com/pictures/G3.jpg", 
					alt : "Picture 3",
					text : "Tower Place. Foster & Partners. 2002",
					
				},
				{                                  
					
					image : "http://www.ptaplin.webspace.virginmedia.com/pictures/G4.jpg", 
					alt : "Picture 4",
					text : "The Lightbox. Marks Barfield Architects. 2007",
					
				},
				{                                  
					
					image : "http://www.ptaplin.webspace.virginmedia.com/pictures/G5.jpg", 
					alt : "Picture 5",
					text : "Salvation Army IHQ. Sheppard Robson/Chadwick International. 2004"
				},
				{                                  
					
					image : "http://www.ptaplin.webspace.virginmedia.com/pictures/G6.jpg", 
					alt : "Picture 6",
					text : "Royal Holloway University of London. William Henry Crossland. 1886"
				},
				{                                  
					
					image : "http://www.ptaplin.webspace.virginmedia.com/pictures/G7.jpg", 
					alt : "Picture 7",
					text : "Royal Holloway University of London. William Henry Crossland. 18867"
				},
				{                                  
					
					image : "http://www.ptaplin.webspace.virginmedia.com/pictures/G8.jpg", 
					alt : "Picture 8",
					text : "Aviator Park. EPR Architects Ltd. 2003"
				}
			],
			thumbnailActivationEvent : "click",

			// Classes of HTML elements to use
			mainImageClass : "picture-slides-image", // Mandatory
			mainImageFailedToLoadClass : "picture-slides-image-load-fail",
			imageLinkClass : "picture-slides-image-link",
			fadeContainerClass : "picture-slides-fade-container",
			imageTextContainerClass : "picture-slides-image-text",
			previousLinkClass : "picture-slides-previous-image",
			nextLinkClass : "picture-slides-next-image",
			imageCounterClass : "picture-slides-image-counter",
			startSlideShowClass : "picture-slides-start-slideshow",
			stopSlideShowClass : "picture-slides-stop-slideshow",
			thumbnailContainerClass: "picture-slides-thumbnails",
			dimBackgroundOverlayClass : "picture-slides-dim-overlay"
		});
	</script>
  </head>
  
  <body>

<div id="page-container">

	
	<div id="header">
    <h1><span class = "PT">PAUL TAPLIN</span>
    <span class ="photo">PHOTOGRAPHY</span></h1>
</div> 												<!-- end of front page header -->
	
	
	
<div id="navigation">
    <ul>
    <li><a href="index.html">Architecture</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
</div> 											<!-- end of navigation -->

	
 
		<div class="picture-slides-container">
			<div class="picture-slides-fade-container">
				<a class="picture-slides-image-link">
					<span class="picture-slides-image-load-fail">The image failed to load:</span>
					<img class="picture-slides-image" src="http://www.ptaplin.webspace.virginmedia.com/pictures/1.jpg" alt="This is picture 1" />
				</a>
			</div>
			
			<div class="picture-slides-image-text">This is picture 1</div>
			
		
			<div class="navigation-controls">
				<a href="index.html" class="picture-slides-previous-image">Previous</a>
				<span class="picture-slides-image-counter"></span>
				<a href="index.html" class="picture-slides-next-image">Next</a>
				
			<!--</div>
			
			<ul class="picture-slides-thumbnails">
				<li><a href="pictures/G1.jpg"><img src="thumbnails/G1.jpg" alt="" /></a></li>
				<li><a href="pictures/G2.jpg"><img src="thumbnails/G2.jpg" alt="" /></a></li>
				<li><a href="pictures/G3.jpg"><img src="thumbnails/G3.jpg" alt="" /></a></li>
				<li><a href="pictures/G4.jpg"><img src="thumbnails/G4.jpg" alt="" /></a></li>
				<li><a href="pictures/G5.jpg"><img src="thumbnails/G5.jpg" alt="" /></a></li>
				<li><a href="pictures/G6.jpg"><img src="thumbnails/G6.jpg" alt="" /></a></li>
				<li><a href="pictures/G7.jpg"><img src="thumbnails/G7.jpg" alt="" /></a></li>
				<li><a href="pictures/G8.jpg"><img src="thumbnails/G8.jpg" alt="" /></a></li>
			</ul>
		</div>-->
						
	

</div>								<!-- end of page container -->

<script>
window.onload = function() {
var holder = document.querySelector("div.picture-slides-image-text");
var lineBreaker = '-';
var replacement = '<br>';
 
var re = new RegExp(lineBreaker, 'ig');
 
holder.innerHTML = holder.innerHTML.replace(re, replacement);
};
</script>

</body>

</html>

Excellent, thanks.

I added another ‘<br>’ and it gave me a double break, thereby extending the space between the lines. That was a lucky guess :slight_smile:

var replacement = ‘<br><br>’;

Unfortunately it only seems to work for the first image, and it doesn’t work when you go backwards through the gallery. Apologies, this seems to be taking up a lot your time Ralph.

Remember that the script is looking for a hyphen (-) in the captions. None of your other captions have a - in them currently (at least in the online version).

Anyhow, this was just a rought experiment on my part. If it doesn’t work with other images, it probably means that the caption is not being created until the image is called, meaning it’s too late for the script to work. Ultimately, I’d still recommend using a better gallery. This one is not very accessible.

Yeah, it seems that way. No worries, thanks for your efforts on this Ralph, much appreciated.

Paul