Images in links and script issue

[Kwb]

Hi there!
I just made my own template and I'm trying to solve two last issues I found.

First:
In the menu, I'd like to have the possibility to have an image ( like an arrow ) that indicates if a link has sublinks. If so, when I click the link, the arrow pointing right, must point down ( and then the links will follow, as show_menu already do ).
Of course, if a link has no sublink, no arrow should be displayed.
Just like that:

Code:

Link 1 ( arrow [arrow points either right or down, depending if I already clicked on Link 1)
- Sublink 1
- Sublink 2
Link 2
Link 3

Second:
In my template I got an area just below the header, divided into two parts: on the left I display the menu and on the right I used this ( http://workshop.rs/projects/coin-slider/ ) slideshow script to show some images.
With plain html everything works fine, however after setting up the index.php of the template for WB, something is not working right. In fact, first of all, images are not showing at all ( but the slideshow works ), and then if I try to make a search, the slideshow stops working ( and images are showed one after the other without any style ) and I think it's due to the fact that I had to add some php code ( <?php echo TEMPLATE_DIR; ?> ) between the image tags to retrive the correct final link of the image ( the problem also shows if I make a non-default page e.g bakery page ):

Code:

<div id="navigationContent">
         <div id="menu">
         <?php show_menu(2); ?>
                <?php if(SHOW_SEARCH) { ?>
                <div id="searchBoxContainer">
                 <div id="searchBoxCornerLeft"></div>
                    <form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get">
                     <input type="text" id="searchBox" name="string" value="Cerca" />
                        <input type="image" src="<?php echo TEMPLATE_DIR;?>/img/searchBoxSubmit_img.png" name="searchBoxSubmit" value="<?php echo $TEXT['SEARCH']; ?>" id="searchBoxSubmit" />
                    </form>
                    <div id="searchBoxCornerRight"></div>
                </div>
                <?php } ?>
         </div>
         <div id="slideshow" class="coin-slider">
                 <a href="<?php echo TEMPLATE_DIR;?>/img/EU001.jpg" target="_blank"><img alt="img1" src="<?php echo TEMPLATE_DIR;?>/img/EU001.jpg"/><span>Wine 1</span></a>
                    <a href="<?php echo TEMPLATE_DIR;?>/img/EU001.jpgEU0017.jpg" target="_blank"><img alt="img2" src="<?php echo TEMPLATE_DIR;?>/img/EU017.jpg"/><span>Wine 2</span></a>
                    <a href="<?php echo TEMPLATE_DIR;?>/img/EU0035.jpg" target="_blank"><img alt="img3" src="<?php echo TEMPLATE_DIR;?>/img/EU035.jpg"/><span>Wine 3</span></a>
            </div>
        </div>

This is the same part, plain html only:

Code:

<div id="navigationContent">
         <div id="menu">
         <ul><li><a href="#">Home</a></li>
             <li><a href="#">Prodotti</a></li>
                 <li><a href="#">Chi siamo</a></li>
                    <li><a href="#">Contatti</a></li>
             </ul>
                <div id="searchBoxContainer">
                 <div id="searchBoxCornerLeft"></div>
                    <form action="#">
                     <input type="text" id="searchBox" name="searchBox" value="Cerca" />
                        <input type="image" src="img/searchBoxSubmit_img.png" name="searchBoxSubmit" value="" id="searchBoxSubmit" />
                    </form>
                    <div id="searchBoxCornerRight"></div>
                </div>
         </div>
         <div id="slideshow" class="coin-slider">
                 <a href="#" target="_blank"><img alt="img1" src="img/EU001.jpg"/><span>Wine 1</span></a>
                    <a href="#" target="_blank"><img alt="img2" src="img/EU017.jpg"/><span>Wine 2</span></a>
                    <a href="#" target="_blank"><img alt="img3" src="img/EU035.jpg"/><span>Wine 3</span></a>
            </div>
        </div>

Hope someone will be able to help me!

Thanks in advance!

[Kwb]

Regarding the second issue I partially solved the problem by using Section Picker module.
However, If I try to make a search, the js slideshow is not showing since the search page has not been set up with section picker.

So the question is: Is there any way to customize the search page, that is, set section picker to show a content also in the search page?

[Kwb]

I think the problem regarding the javascript not executing correctly is related to a kind of execution priority of code... I don't know if this is true or not, but I do think that the browser executes first the JS and then the php code. Since images are fetched via php, the js script gets the wrong path because php has not been executed... In fact, setting absolute urls solves the problem...

Is that possible? Is there any sort of code execution priority?

[Ruud]

Is there any sort of code execution priority?

PHP is executed on the server, generating HTML before it is sent to the browser.
The browser is loading and executing JS. The two (PHP/JS) have no direct relation.

The problem with using relative/full path is a different one.

Suppose you are loading a page /pages/home.php. (Your template is located in /templates/yrtemplate/index.php)
For the browser any relative paths are to the /pages/ directory.
If you next load a page /pages/home/subpage.php, the browser uses the relative path /pages/home/.
The template directory (like in your first example) is not known to the browser.

So in templates located somewhere else (like WB uses) you must always use full paths.