[Glueckmacher]

Your phpBB Version: 3.0.7
Your phpBB Type: Standard phpBB (also called Olympus (phpBB3))
MODs installed: Yes
Your knowledge: Basic Knowledge

What have you done before the problem was there?
No Problem

What have you already tried to solve the problem?
Nothing

Description and Message
Hello and at first thank you for this nice mod.

I've installed it and everything looks fine. Now I would like to enlarge the shown picture, if a user has klicked on it, because otherwise the pictures are too small.

Could you tell me, where I have what to change, so I get this function?

Thank you in advance!

[FreakyBlue]

You can make the images clickable by adding a link to the images in the ./template/what_is/what_is.html file.

Just look for this piece of code:

Code: Select all

<img src="{T_TEMPLATE_PATH}/what_is/images/3.jpg" alt="{L_IDLAUNCH_SUPPORT}" />

Make them clickable by doing this:

Code: Select all

<a href="yourlink"><img src="{T_TEMPLATE_PATH}/what_is/images/3.jpg" alt="{L_IDLAUNCH_SUPPORT}" /></a>

If you would really like to spice this up, combine it with a JQuery image lightbox function. But I guess that's a little bit too much

[Glueckmacher]

Thanks for your fast support! Some things are much easier than they appeared to me.

Regarding your challenge, I will see what I'm able to do.

[Glueckmacher]

Now it works how I wished.

Normal:


Enlarged after klick:


I've found the solution as I combinated with Highslide Attachment Mod.

After installation of "what is page", you have to make the change at overall_header from Highslide Mod. Then upload the folder "highslide" of the Highslide Mod and change the what_is.html as follows:

Code: Select all

<!-- INCLUDE overall_header.html -->
<div id="idlaunch">
   <div class="idlaunch_title">{L_IDLAUNCH_TITLE}</div>
        <div id="idlaunch_slider">
            <img class="idlaunch_scrollButtons left" src="{T_TEMPLATE_PATH}/what_is/images/leftarrow.png">
         <div style="overflow: hidden;" class="idlaunch_scroll">
            <div class="idlaunch_scrollContainer">
               <div class="idlaunch_panel" id="panel_1">
                  <div class="idlaunch_inside">
                            <div class="highslide-gallery">
                            <a href="{T_TEMPLATE_PATH}/what_is/images/G1.jpg" class="highslide" onclick="return hs.expand(this, { wrapperClassName: 'controls-in-heading', slideshowGroup: 'highslide' })"><img src="{T_TEMPLATE_PATH}/what_is/images/k1.jpg" alt="" title="Click to enlarge" style="max-width:300px; max-height:300px;" /></a><div class="highslide-heading"></div>
                            </div>
                            <h2>{L_IDLAUNCH_SUPPORT_VALUE}</h2>
                     <p>{L_IDLAUNCH_SUPPORT_EXPLAIN}</p>
                  </div>
               </div>
                   <div class="idlaunch_panel" id="panel_2">
                  <div class="idlaunch_inside">
                     <div class="highslide-gallery">
                            <a href="{T_TEMPLATE_PATH}/what_is/images/G2.jpg" class="highslide" onclick="return hs.expand(this, { wrapperClassName: 'controls-in-heading', slideshowGroup: 'highslide' })"><img src="{T_TEMPLATE_PATH}/what_is/images/k2.jpg" alt="" title="Click to enlarge" style="max-width:300px; max-height:300px;" /></a><div class="highslide-heading"></div>
                            </div>
                            <h2>{L_IDLAUNCH_RESTYLE_VALUE}</h2>
                     <p>{L_IDLAUNCH_RESTYLE_EXPLAIN}</p>
                  </div>
               </div>
                   <div class="idlaunch_panel" id="panel_3">
                  <div class="idlaunch_inside">
                     <div class="highslide-gallery">
                            <a href="{T_TEMPLATE_PATH}/what_is/images/G3.jpg" class="highslide" onclick="return hs.expand(this, { wrapperClassName: 'controls-in-heading', slideshowGroup: 'highslide' })"><img src="{T_TEMPLATE_PATH}/what_is/images/k3.jpg" alt="" title="Click to enlarge" style="max-width:300px; max-height:300px;" /></a><div class="highslide-heading"></div>
                            </div>
                            <h2>{L_IDLAUNCH_EXTEND_VALUE}</h2>
                     <p>{L_IDLAUNCH_EXTEND_EXPLAIN}</p>
                  </div>
               </div>
                  
               <div class="idlaunch_panel" id="panel_4">
                  <div class="idlaunch_inside">
                     <div class="highslide-gallery">
                            <a href="{T_TEMPLATE_PATH}/what_is/images/G4.jpg" class="highslide" onclick="return hs.expand(this, { wrapperClassName: 'controls-in-heading', slideshowGroup: 'highslide' })"><img src="{T_TEMPLATE_PATH}/what_is/images/k4.jpg" alt="" title="Click to enlarge" style="max-width:300px; max-height:300px;" /></a><div class="highslide-heading"></div>
                            </div>
                            <h2>{L_IDLAUNCH_INTEGRATE_VALUE}</h2>
                     <p>{L_IDLAUNCH_INTEGRATE_EXPLAIN}</p>
                  </div>
               </div>
               <div class="idlaunch_panel" id="panel_5">
                  <div class="idlaunch_inside">
                     <div class="highslide-gallery">
                            <a href="{T_TEMPLATE_PATH}/what_is/images/G5.jpg" class="highslide" onclick="return hs.expand(this, { wrapperClassName: 'controls-in-heading', slideshowGroup: 'highslide' })"><img src="{T_TEMPLATE_PATH}/what_is/images/k5.jpg" alt="" title="Click to enlarge" style="max-width:300px; max-height:300px;" /></a><div class="highslide-heading"></div>
                            </div>
                            <h2>{L_IDLAUNCH_HIRE_VALUE}</h2>
                     <p>{L_IDLAUNCH_HIRE_EXPLAIN}</p>
                  </div>
               </div>
                </div>

            <div id="idlaunch_left-shadow"></div>
            <div id="idlaunch_right-shadow"></div>

            </div>

         <img class="idlaunch_scrollButtons right" src="{T_TEMPLATE_PATH}/what_is/images/rightarrow.png">

        </div>
      <div id="join">
         <div class="join_explain"><a href="{U_REGISTER}">{L_JOIN_NOW}</a>
         <span class="join">{L_ALREADY_MEMBER} <a href="{U_LOGIN_LOGOUT}">{L_SIGN_IN}</a></span>
         </div>
      </div>
</div>

<!-- INCLUDE overall_footer.html -->

G1.jpg (example) is the picture, which will be shown, if a user klick the small picture. And of course the small picture has therefore the name k1.jpg (example). Then you have only to upload your pictures, clear all caches and it works.

Only still one question please. If I call the what_is page, automatically the third picture is shown. Where I'm able to change, so it will the first picture immediately shown?

[FreakyBlue]

Only still one question please. If I call the what_is page, automatically the third picture is shown. Where I'm able to change, so it will the first picture immediately shown?

I guess the easiest way to do this is renaming the images
The image '3' is in the middle and will be shown first. So give the image you would like to be shown first the number 3. This way you don't have to edit any code