CodeBlog.ch

Bilder in der Navigation

1
2
3
4
5
6
7
8
9
10

if ($c->getCollectionID() == $_c->getCollectionID()) { 
	echo('
	<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
	echo('
	<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} else {
	echo('
	<li><a href="' . $pageLink . '">' . $ni->getName() . '</a>');
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$linkTextActive = $ni->getName();
$linkTextInactive = $ni->getName();
 
$picOn = $_c->getAttribute('pic_on');
$picOff = $_c->getAttribute('pic_off');
 
if ($picOn) {
  $linkTextActive = '<img src="' . $picOn->getURL() . '" alt="' . linkTextActive . '"/>';
}
if ($picOff) {
  $linkTextInactive = '<img src="' . $picOff->getURL() . '" alt="' . linkTextInactive . '"/>';
}
 
if ($c->getCollectionID() == $_c->getCollectionID()) { 
	echo('
	<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
	echo('
	<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} else {
	echo('
	<li><a href="' . $pageLink . '">' . $linkTextInactive . '</a>');
}

19 Responses to 'Bilder in der Navigation'

Subscribe to comments with RSS or TrackBack to 'Bilder in der Navigation'.

1. Bryan Lewis said,
   
   

   on Dezember 14th, 2009 at 21:32:57

   This would be a terrific block to have! Is there a way to create a autonav picture block instead of having to manually do this every time?

2. Remo Laubacher said,
   
   

   on Dezember 14th, 2009 at 21:37:43

   Thanks Bryan! It might be possible to create an installer which creates the attributes and adds a new custom template… Will look into that later.

3. Bryan Lewis said,
   
   

   on Dezember 17th, 2009 at 00:03:22

   Thanks for the reply Remo keep the great articles coming! And thanks for all the great contribution!

4. Bryan Lewis said,
   
   

   on Dezember 30th, 2009 at 16:32:18

   Remo, I’m trying to accomplish this and its working for the most part but the pic_on is on no matter what page I’m on or weather I’m hovering over it or not. I’m using pic_off for my handle and am not seeing it at all. Any more tips?

5. Remo Laubacher said,
   
   

   on Dezember 30th, 2009 at 16:44:59

   Well, there is no hover effect. Wanted to make it as simple as possible. But the active picture should change depending on the page you are..
   Got a link?

6. Paul Napier said,
   
   

   on Dezember 31st, 2009 at 21:41:29

   Bryan,

   Can you give me a sample of how your image_navigation.php file looks please. I have followed the tutorial but cannot get any part to work. Some instruction of how much code to replace from line 55 would be good.

7. Remo Laubacher said,
   
   

   on Dezember 31st, 2009 at 22:00:50

   Paul, you have to replace all 10 lines starting at line 55 with the 23 lines in the second codeblock. That’s it!

8. DianaV said,
   
   

   on Januar 27th, 2010 at 05:08:11

   I am having exactly the same problem as Bryan Lewis on DECEMBER 30TH. I have only 5 menu links on my site where home is the first. As I navigate to the other pages, homes remains as pic-on, it does to change to pic_off. All the other links work well.

   Any thoughts?

9. Remo Laubacher said,
   
   

   on Januar 27th, 2010 at 19:44:55

   You might want to try to replace $linkTextActive with $linkTextInactive in line 19 but this would also affect multi level sites. The top level wouldn’t be active if you navigate to a child page..

   Home is the parent of all pages in my template and therefore always active. Don’t use “home”

   1. Home
   1.1 News
   1.1.1 News Entry #1

   If you’re on 1.1.1, 1.1 should be active as well, shouldn’t it? But 1 is also the parent of 1.1 and therefore active as well…

   You can try to exclude home using some checks, but there’s no general solution, it depends on your site structure.

10. DianaV said,
    
    

    on Januar 27th, 2010 at 22:48:37

    Hi Remo!

    Thanks so much for responding! The solution works perfectly since this particular website is not intended to be multi-level.site. But I do get what you say and it makes a lot of sense.

    Actually, I thought about removing the link home and just have the logo linking to it, but I was debating that thought as many users still feel lost when they do not see this link.

    Once again. Thank you!

11. Dominic Soito said,
    
    

    on April 30th, 2010 at 18:06:06

    Is there any way to allow people to use sub domains from server X on server Y?

12. VortexSurfer said,
    
    

    on Juni 18th, 2010 at 11:23:52

    working just wonderful …

    …but what is the trick to get a hover-effect also?

    tried already tons of variations but didn’t get it working.

13. Remo Laubacher said,
    
    

    on Juni 18th, 2010 at 11:44:33

    You can easily add something like this:

    onmouseover=”this.src=’< ?php echo $picOn?>‘”

    do the same with onmouseout and you already have a partially working hover effect. Please note, if you do it this way, it won’t preload the images, you might have a short lag when hovering the image.

14. VortexSurfer said,
    
    

    on Juni 19th, 2010 at 22:49:19

    thanks. it works now.

    actually i added a third pic for the hover-status and added/modified your code from above like this:

    $picHover = $_c->getAttribute('nav_img_hover');

    and

    if ($picOff) {
      $linkTextInactive = 'getURL().'" onmouseover=src="'.$picHover->getURL().'" src="' . $picOff->getURL() . '" alt="' . $linkTextInactive . '"/>';
    }

15. VortexSurfer said,
    
    

    on Juni 19th, 2010 at 22:59:14

    sorry. with mouseout also i looks like this then:

    if ($picOff) {
     $linkTextInactive = '<img onmouseout=src="'.$picOff->getURL().'" onmouseover=src="'.$picHover->getURL().'" src="' . $picOff->getURL() . '" alt="' . $linkTextInactive . '"/>';
    }

16. VortexSurfer said,
    
    

    on Juni 19th, 2010 at 23:03:19

    ??? it modiefied my copy/paste-entry of the code here automatically!??

    …. ach remo spricht ja auch deutsch …

    irgendwie veränder sich der code den ich in meinen kommentar-eintrag reinkopiert habe automatisch!? ist das normal?

17. Remo Laubacher said,
    
    

    on Juni 20th, 2010 at 08:31:22

    Ja, irgendwie macht Wordpress bei mir diese Codes raus. Wenn man es mit <pre lang=”javascript”>…</pre> umschliesst, wird es sogar bunt..

18. Rik said,
    
    

    on August 18th, 2010 at 13:13:43

    How can i get this lag out of the hover? isn’t there a way to preload al the images like the hover images??

19. Remo Laubacher said,
    
    

    on August 20th, 2010 at 15:10:34

    You have to preload the images. This can be done if you’re using a hidden image or some javascript:

    var im = new Image();
    im.src = "bla.png";
    

Leave a Reply