SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 30 of 30
  1. #26
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  2. #27
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Kristeva View Post
    is there a way of targeting a special character that could be rendered invisible on the page
    Even easier, you can just remove it altogether. Instead of adding a <br> to it, just replace it with a <br>:

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

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

  3. #28
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    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.

  4. #29
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Kristeva View Post
    Unfortunately it only seems to work for the first image
    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.

  5. #30
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, it seems that way. No worries, thanks for your efforts on this Ralph, much appreciated.

    Paul


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
  •