einszueins
Posts: 9
Joined: Thu Feb 24, 2011 8:30 am

Title doesn┬┤t show in first picture when revisiting

Hello,

I want to create a website with several galleries. In the image title there should be a link (weiterlesen = read more) that makes some additional text pop up.
I have three problems/questions:
1. When going through the pictures all titles show up, but when coming back to the first picture the title is missing.
2. I made a general format for the galleries, so they all have the controls in the same place. I don┬┤t want the controlls to show up on the additional text though.
3. Is it also possible to have the additional Text in a seperate html file?

This is the site:
http://www.architekt-hamburg.net/projekte/projekte.htm

Code: Select all

      <div id="mainContent">
      
      <div id="kachel">
        <div class="highslide-gallery">
          <a id="thumb1" href="highslide/images/p88/01.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
          <img src="highslide/images/p88/thumb.jpg"  alt=""
			title="B├╝rohaus P88" />	</a>
        
          <span id="p88" class="highslide-heading">B├╝rohaus P88<a href="#" onclick="return hs.htmlExpand(this)">
	weiterlesen
</a></span>

<div class="highslide-maincontent">
	<h3>B├╝rohaus P88</h3>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. 
	Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. 
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
	ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. 
	Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, 
	quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. 
	Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
</div>
            

          <div class="hidden-container">
            <a href="highslide/images/p88/02.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )"></a> 
            <span id="p88" class="highslide-heading">B├╝rohaus P88   <a href="#" onclick="return hs.htmlExpand(this)">
	weiterlesen</a></span>
            
            
            <a href="highslide/images/p88/03.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )"></a>	
            
            <span id="p88" class="highslide-heading">B├╝rohaus P88   <a href="#" onclick="return hs.htmlExpand(this)">
	weiterlesen</a></span>
            
          </div></div>
            
           <strong>B├╝rohaus P88</strong> | Berlin</div>
      

<div id="kachel">
        <div class="highslide-gallery">
          <a id="thumb2" href="highslide/images/nat/01.jpg" class="highslide" 
			onclick="return hs.expand(this, config2 )">
          <img src="highslide/images/nat/thumb.jpg"  alt=""
			title="nat. fine bio food" />	</a>
            
          <span id="nat" class="highslide-heading">nat. fine bio food<a href="#" onclick="return hs.htmlExpand(this)">
		weiterlesen</a></span>
    
<div class="highslide-maincontent">
	<h3>nat. fine bio food</h3>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. 
	Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. 
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
	ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. 
	Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, 
	quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. 
	Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
</div>
          
        
          <div class="hidden-container">
          
            <a href="highslide/images/nat/02.jpg" class="highslide" 
			onclick="return hs.expand(this, config2 )"></a>
            
            <span id="nat" class="highslide-heading">nat. fine bio food   <a href="#" onclick="return hs.htmlExpand(this)">
			weiterlesen</a></span>
         
    </div></div>
            
            <strong>nat. fine bio food</strong> | Hamburg</div>
Thanks a lot in advance,
Christoph
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Title doesn┬┤t show in first picture when revisiting

Hi Christoph,

1) Remove the repeated idÔÇÖs for the .highslide-heading spans (highlighted).

Code: Select all

      <div id="mainContent">
      
      <div id="kachel">
        <div class="highslide-gallery">
          <a id="thumb1" href="highslide/images/p88/01.jpg" class="highslide" 
         onclick="return hs.expand(this, config1 )">
          <img src="highslide/images/p88/thumb.jpg"  alt=""
         title="B├╝rohaus P88" />   </a>
        
          <span [hilight]id="p88"[/hilight] class="highslide-heading">B├╝rohaus P88<a href="#" onclick="return hs.htmlExpand(this)">
   weiterlesen
</a></span>

<div class="highslide-maincontent">
   <h3>B├╝rohaus P88</h3>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
   Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. 
   Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. 
   Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
   ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. 
   Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, 
   quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. 
   Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
</div>
            

          <div class="hidden-container">
            <a href="highslide/images/p88/02.jpg" class="highslide" 
         onclick="return hs.expand(this, config1 )"></a> 
            <span [hilight]id="p88"[/hilight] class="highslide-heading">B├╝rohaus P88   <a href="#" onclick="return hs.htmlExpand(this)">
   weiterlesen</a></span>
            
            
            <a href="highslide/images/p88/03.jpg" class="highslide" 
         onclick="return hs.expand(this, config1 )"></a>   
            
            <span [hilight]id="p88"[/hilight] class="highslide-heading">B├╝rohaus P88   <a href="#" onclick="return hs.htmlExpand(this)">
   weiterlesen</a></span>
            
          </div></div>
            
           <strong>B├╝rohaus P88</strong> | Berlin</div>
      

<div id="kachel">
        <div class="highslide-gallery">
          <a id="thumb2" href="highslide/images/nat/01.jpg" class="highslide" 
         onclick="return hs.expand(this, config2 )">
          <img src="highslide/images/nat/thumb.jpg"  alt=""
         title="nat. fine bio food" />   </a>
            
          <span [hilight]id="nat"[/hilight] class="highslide-heading">nat. fine bio food<a href="#" onclick="return hs.htmlExpand(this)">
      weiterlesen</a></span>
    
<div class="highslide-maincontent">
   <h3>nat. fine bio food</h3>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
   Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. 
   Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. 
   Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
   ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. 
   Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, 
   quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. 
   Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
</div>
          
        
          <div class="hidden-container">
          
            <a href="highslide/images/nat/02.jpg" class="highslide" 
         onclick="return hs.expand(this, config2 )"></a>
            
            <span [hilight]id="nat"[/hilight] class="highslide-heading">nat. fine bio food   <a href="#" onclick="return hs.htmlExpand(this)">
         weiterlesen</a></span>
         
    </div></div>
            
            <strong>nat. fine bio food</strong> | Hamburg</div>
2) Define the slideshowGroups for the galleries in the addSlideshow part of the code (highlighted).

Code: Select all

// Add the slideshow controller
hs.addSlideshow({
	[hilight]slideshowGroup: ['group1', 'group2'],[/hilight]
	interval: 5000,
	repeat: true,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'top center',
		offsetX: '0',
		offsetY: '0',
		hideOnMouseOut: true
	}
});
3) You can use objectType: 'ajax' or objectType: 'iframe' instead of highslide-maincontent.
See barebones sample pages: http://highslide.com/examples/ajax.html & http://highslide.com/examples/iframe.html
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
einszueins
Posts: 9
Joined: Thu Feb 24, 2011 8:30 am

Re: Title doesn┬┤t show in first picture when revisiting

Thank You - that worked!

1. Now my problem is that I want to have the same heading for all pictures in one gallery. I don┬┤t want to repeat the same title several times though. I tried "hs.headingEval = 'this.thumb.title';" but always got problems because I have a link to an i-frame an a little logo in the header. Is there any solution?

2. I set Highslide to go to the next picture when clicking on one. I would like it to close after the last picture of each gallery though. Is that possible?

3. On my opening page I would like to have a simple autoplaying inpage slideshow (no thumbs no clicking). Do you have a sample, barebone, code or a hint for me?

Code: Select all

      <div id="mainContent">
      
      <!-- projekt 1 - p88 -->
      <div id="kachel">
      
        <div class="highslide-gallery">
          <a id="thumb1" href="highslide/images/p88/01.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )">
          <img src="highslide/images/p88/thumb.jpg"  alt="architekt_hamburg"
			title="B├╝rohaus P88" />	</a>
        
          <span class="highslide-heading">
          <img src="../buttons/einszueinslogo_mini.png" alt="eins:eins architekten, Hamburg" />
          B├╝rohaus P88, Berlin
          <a href="highslide/images/p88/text.html" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">
		  &nbsp;| mehr Information ></a></span>
       
          <div class="hidden-container">
            <a href="highslide/images/p88/02.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )"></a> 

          <span class="highslide-heading">
          <img src="../buttons/einszueinslogo_mini.png" alt="eins:eins architekten, Hamburg" />
          B├╝rohaus P88, Berlin
          <a href="highslide/images/p88/text.html" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">
		  &nbsp;| mehr Information ></a></span>
            
            <a href="highslide/images/p88/03.jpg" class="highslide" 
			onclick="return hs.expand(this, config1 )"></a>	
            
          <span class="highslide-heading">
          <img src="../buttons/einszueinslogo_mini.png" alt="eins:eins architekten, Hamburg" />
          B├╝rohaus P88, Berlin
          <a href="highslide/images/p88/text.html" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">
		  &nbsp;| mehr Information ></a></span>
        
        </div>
        </div>
            
        <strong>B├╝rohaus P88</strong> | Berlin</div>
        <!-- end projekt 1 - p88 -->

        <!-- projekt 2 - nat -->
      <div id="kachel">
      
        <div class="highslide-gallery">
          <a id="thumb2" href="highslide/images/nat/01.jpg" class="highslide" 
			onclick="return hs.expand(this, config2 )">
          <img src="highslide/images/nat/thumb.jpg"  alt="architekt_hamburg"
			title="B├╝rohaus P88" />	</a>
        
          <span class="highslide-heading">
          <img src="../buttons/einszueinslogo_mini.png" alt="eins:eins architekten, Hamburg" />
          nat. fine bio food
          <a href="highslide/images/p88/text.html" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">
		  &nbsp;| mehr Information ></a></span>

       
          <div class="hidden-container">
            <a href="highslide/images/nat/02.jpg" class="highslide" 
			onclick="return hs.expand(this, config2 )"></a> 

          <span class="highslide-heading">
          <img src="../buttons/einszueinslogo_mini.png" alt="eins:eins architekten, Hamburg" />
          nat. fine bio food
          <a href="highslide/images/p88/text.html" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">
		  &nbsp;| mehr Information ></a></span>

            

        
        </div>
        </div>
            
        <strong>nat. fine bio food</strong> | Hamburg</div>
            <!-- end projekt 2 - nat -->
            
            
     </div>
Best regards, Christoph
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Title doesn┬┤t show in first picture when revisiting

1)
Remove all the highslide-heading divs in your page.

Add this somewhere in the body section of your page ÔÇô note the ids:

Code: Select all

<span [hilight]id="p88-heading"[/hilight] class="highslide-heading">
          <img src="../buttons/einszueinslogo_mini.png" alt="eins:eins architekten, Hamburg" />
          B├╝rohaus P88, Berlin
          <a href="highslide/images/p88/text.html" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">
		  &nbsp;| mehr Information ></a></span>

<span [hilight]id="nat-heading"[/hilight] class="highslide-heading">
          <img src="../buttons/einszueinslogo_mini.png" alt="eins:eins architekten, Hamburg" />
          nat. fine bio food
          <a href="highslide/images/p88/text.html" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">

		  &nbsp;| mehr Information ></a></span>
Add corresponding headingId to each config for the galleries:

Code: Select all

// gallery config object
var config1 = {
	slideshowGroup: 'group1',
	thumbnailId: 'thumb1',
	numberPosition: 'caption',
	transitions: ['expand', 'crossfade'][hilight],
	headingId: 'p88-heading'[/hilight]
};

var config2 = {
	slideshowGroup: 'group2',
	thumbnailId: 'thumb2',
	numberPosition: 'caption',
	transitions: ['expand', 'crossfade'][hilight],
	headingId: 'nat-heading'[/hilight]
};
2)
Set repeat to false in the addSlideshow part of the code in you highslide.config.js file:

Code: Select all

// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: ['group1', 'group2'],
	interval: 5000,
	[hilight]repeat: false,[/hilight]
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '22',
		hideOnMouseOut: false
	}
});
3) See this demo: http://www.roadrash.no/hs-support/galle ... oplay.html
Personally I think the jQuery Cycle plugin w/the fade effect is a better solution for this type of slideshow.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
einszueins
Posts: 9
Joined: Thu Feb 24, 2011 8:30 am

Re: Title doesn┬┤t show in first picture when revisiting

Great support!! Thanks a lot!

Return to “Highslide JS Usage”