Responsive filmstrip (filmstrip divs no tables)

[allvip]

solution 1: Just add this styles to themes/your_theme/your_style.css:

Code Select Expand


.strip_image {
    max-width: 10vw!important;
    height: auto;
}

#film {
    width: 100%!important;   
}

#film .thumb a:link  {
    width: 100%!important;
}

.tape  {
    width: 100%!important;
    height: 100%!important;
    margin-left: 0px!important;
}

.remove {
    display: none!important;
}


DEMO solution 1 - view attachments respFilmTablesol1_min (small browser window) and respFilmTablesol1_max (full browser window)

IF YOU WANT TO REPLACE TABLES WITH DIVS then read solution 2:

solution 2:

1.add this styles to themes/your_theme/your_style.css:

Code Select Expand


.strip_image {
    max-width: 10vw!important;
    height: auto;
}

#filmstrip {
    background-color: #000;
}

.filmstrip_background {
    height: 28px!important;
    clear: both;
}

#film {
    width: 86%!important;
    float: left; 
}

#film .thumb a:link  {
    width: 100%!important;
}

.tape  {
    width: 100%!important;
    height: 100%!important;
    margin-left: 0px!important;
}

.remove {
    display: none!important;
}

.filmstripNav {
    width: 7%!important;
    float: left;
    padding: 7vw 0 0 0;
}

.filmstripNav img {
    max-width: 4vw!important;
    height: auto!important;
}


2.add $template_film_strip to themes/your_theme/theme.php (check to see if function $template_film_strip is already in your theme and replace it with my code):

Code Select Expand


/******************************************************************************
** Section <<<$template_film_strip>>> - START
******************************************************************************/
// HTML template for filmstrip display
$template_film_strip = <<<EOT
                <div class="filmstrip_background" style="background-image: url({TILE1});"></div>
                <div style="{THUMB_TD_STYLE}">
                  <div class="filmstripNav"><a id="filmstrip_prev" rel="nofollow" style="cursor: pointer;"><img src="images/navbar/prev.png" title="Previous Thumbnail"/></a></div>
                  <div id="film"><table class="tape"><tr>{THUMB_STRIP}</tr></table></div>
                   <div class="filmstripNav"><a id="filmstrip_next" rel="nofollow" style="cursor: pointer;"><img src="images/navbar/next.png" title="Next Thumbnail"/></a></div>
                </div>   
                <div class="filmstrip_background" style="background-image: url({TILE1});"></div>
<!-- BEGIN thumb_cell -->
                <td class="thumb">
                  <a href="{LINK_TGT}" class="thumbLink">{THUMB}</a>
                </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" align="center" >&nbsp;</td>
<!-- END empty_cell -->
EOT;
/******************************************************************************
** Section <<<$template_film_strip>>> - END
******************************************************************************/


3. copy Section <<<theme_display_film_strip>>> from themes/sample/theme.php if is not already in themes/your_theme/theme.php and replace: starttable with echo '<div class="maintable">'; and endtable(); with echo '</div>';You can delete even ($CONFIG['picture_table_width']);

[allvip]

If you like text more then images (images make hits and bigger page size for the sever anyway) then:

1.repace <img src="images/navbar/prev.png" title="Previous Thumbnail"/> and <img src="images/navbar/next.png" title="Next Thumbnail"/> with the words Prevoius and Next or wathever you want in the code from solution 2 step 2 (function $template_film_strip).
2.add to the code from solution 2 step 1:

Code Select Expand


.filmstripNav a,.filmstripNav a:hover,.filmstripNav a:visited {
    color: #FFF;
    font-size: 1.5vw;
    padding: 0 0 0 1vw;
}


If you want to use custom images for the arrows then in the code from solution 2 step 2 (function $template_film_strip).

replace :

Code Select Expand

<img src="images/navbar/prev.png" title="Previous Thumbnail"/>

with:

Code Select Expand

<img src="themes/your_theme_name/images/your_image1.gif" title="Previous Thumbnail"/>

replace :

Code Select Expand

<img src="images/navbar/prev.png" title="Previous Thumbnail"/>

with:

Code Select Expand

<img src="themes/your_theme_name/images/your_image2.gif" title="Previous Thumbnail"/>

REMEMBER to change your_theme_name with your theme name.

[allvip]

For all the page to be responsive not just the filmstrip : http://forum.coppermine-gallery.net/index.php/topic,76542.msg371047.html#msg371047

Curve responsive theme has responsive filmstrip like in solution 1 http://forum.coppermine-gallery.net/index.php/topic,77662.0.html .The theme is 100% RESPONSIVE not just the filmstrip.

[allvip]

IF YOU WANT SMALL FILMSTRIP:

IF you like small filmstrip with small thumbnails like I see on many websites:

_change in the css code the number for: max-width in .strip_image,padding for .filmstripNav and font-size in .filmstripNav a,.filmstripNav a:hover.
_add width: 50%; to class #filmstrip

You can also add min-width: 300px; in class #filmstrip to prevent the filmstrip to become to small on small screens/devices.

[allvip]

SOON I will update first post with: filmstrip with equal height thumbs when thumbnails are set to max aspect in config.

[allvip]

I DELETEd everything today 15/07/2014 because was done the wrong way and I replaced all the posts above with the new code.