Widescreen theme based on igames

[Gene-2008]

I have started using widescreen laptops and thus wanted a widescreen version that I wouldn't have to scroll up/down so much.

This started as igames and I renamed to atsiv_wide (vista backwards)

It has Sys_menu, Sub_menu, Admin_menu, film strip on the left and rating on the right

Site is: http://genefyoung.com/photos

To me it works well with widescreen but also with 4:3 screens...

Feedback welcomed,
Gene

[Joachim Müller]

Works on my Widescreen notebook as expected - nice job. Are you planning to release this to the public (you don't have to, but we'd appreciate)? I think there will be others who are interessted to see this theme available for download.

[Gene-2008]

Yes I would like to make it available....but before I do I wanted to validate it and make a slight tweak.

And that is where I have gotten stumped. :-\  I want to move the prev/next navigation buttons to the top/bottom of the vertical filmstrip.

I am almost there but I can't seem to get the code to work.  I have a $template_img_navbar and a $template_film_strip.
I can get the next/prev  Links and Title to work in the nav_bar but not in the film_strip.  Note I don't plan to have them in both places I'm just trying to debug it.

Is there a timing relationship where the film_strip template is being used before the {PREV_TGT} etc is being set?

Does this need to be moved to a support page?

Thanks in advance for any help,
Gene

Note the image is what I am trying to do but with arrows above below the film strip instead of the words.

Code Select Expand

// HTML template for the image navigation bar
$template_img_navbar = <<<EOT

<td align="center" valign="middle" class="navmenu2">
       <a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}"><img src="{LOCATION}images/prev.gif"  border="0" align="middle" alt="{PREV_TITLE}" /></a>
    </td>
    <td align="center" valign="middle" class="navmenu2">
       <a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}"><img src="{LOCATION}images/next.gif"  border="0" align="middle" alt="{NEXT_TITLE}" /></a>
    </td>
<td align="center" valign="middle" class="navmenu" width="48">
      <a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}"><img src="{LOCATION}images/thumbnails.gif" align="middle" border="0" alt="{THUMB_TITLE}" /></a>
    </td>

    <td align="center" valign="middle" class="navmenu" width="48">
      <a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.gif" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>
    </td>

    <td align="center" valign="middle" class="navmenu" width="48">
      <a href="{SLIDESHOW_TGT}" class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.gif" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>
    </td>
<!-- BEGIN report_file_button -->
            <td align="center" valign="middle" class="navmenu" width="48">
              <a href="{REPORT_TGT}" class="navmenu_pic" title="{REPORT_TITLE}"><img src="{LOCATION}images/report.gif" border="0" align="middle" alt="{REPORT_TITLE}" /></a>
            </td>
<!-- END report_file_button -->

<!-- BEGIN ecard_button -->
            <td align="center" valign="middle" class="navmenu" width="48">
              <a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}"><img src="{LOCATION}images/ecard.gif"  border="0" align="middle" alt="{ECARD_TITLE}" /></a>
            </td>
<!-- END ecard_button -->
   
    <td align="left" valign="middle" class="navmenu" width="100%">
        &nbsp {PIC_POS}
    </td>

EOT;

// HTML template for filmstrip display
$template_film_strip = <<<EOT
<tr><td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>

<td valign="top" style="background-image: url({TILE1});"><img src="{TILE1}" alt="" border="0" /></td>
   
    <!--begin thumb -->
<td><table style="width: 100%">
<tr>
    <td>
    <table width="100%" cellspacing="0" cellpadding="0">
    <tr><td align="center" valign="middle" class="navmenu">
         <a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}">
           <img src="{LOCATION}images/prev.gif"  border="0" align="middle" alt="{PREV_TITLE}" />
         </a>
    </td>
</tr>
</table>
</td>
</tr>
    <tr>
    <td> {THUMB_STRIP} </td>
    </tr>
    <tr>
    <td>
    <table width="100%" cellspacing="0" cellpadding="0">
    <tr><td align="center" valign="middle" class="navmenu">
         <a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}">
           <img src="{LOCATION}images/NEXT.gif"  border="0" align="middle" alt="{NEXT_TITLE}" />
         </a>
    </td>
    </tr>
</table>
</td>
</tr>
</table>
</td>
    <!--end thumb -->
    <td valign="top" style="background-image: url({TILE2});"><img src="{TILE2}" alt="" border="0" /></td>

</tr>
</table>
</td></tr>

<!-- BEGIN thumb_cell -->
<table width="100%" cellspacing="0" cellpadding="0">
  <tr><td align="center" valign="bottom"><a href="{LINK_TGT}">{THUMB}</a></td></tr>
</table>
{CAPTION}
{ADMIN_MENU}
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
   <td valign="top" align="center">&nbsp;</td>
<!-- END empty_cell -->
EOT;


[Joachim Müller]

The tokens (the placeholders in curly braces) need to be populated. You'll have to code that as well. The calculation currently happens inside the function theme_html_img_nav_menu. You'll have to move the calculation out of that function and into the function theme_display_film_strip.

[Gene-2008]

Ok this is as far as I want to take it for now.  I have validated as best I can.

Others are welcomed to have a go at it.

Thanks for the help,   
Gene

Note attached here is the theme, a screen capture....and a link http://genefyoung.com/photos

[Joachim Müller]

Thanks for your readiness to share. I have renamed your theme to "igames_widescreen" for easier use on our demo page. I have added the theme to our downloads section and demo.

Demo - Download

[ur_superflous_snobs]

Excellent theme man !!

The picture marquee at top on your site is fantabulous !! feel like   it

Kudos !!  

[Gene-2008]

Thanks I'm glad you like it.   

BTW if by picture marquee you mean the sliding banner of images that is a CPG plugin freely available here:
http://forum.coppermine-gallery.net/index.php/topic,51324.html

Gene