Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Responsive filmstrip (filmstrip divs no tables)  (Read 7614 times)

0 Members and 1 Guest are viewing this topic.

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Responsive filmstrip (filmstrip divs no tables)
« on: May 27, 2014, 09:37:41 pm »

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

Code: [Select]
.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]
.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]
/******************************************************************************
** 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']);

« Last Edit: July 15, 2014, 08:22:13 am by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Responsive filmstrip (filmstrip divs no tables)
« Reply #1 on: May 27, 2014, 09:48:25 pm »

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]
.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]
<img src="images/navbar/prev.png" title="Previous Thumbnail"/>
with:

Code: [Select]
<img src="themes/your_theme_name/images/your_image1.gif" title="Previous Thumbnail"/>
replace :

Code: [Select]
<img src="images/navbar/prev.png" title="Previous Thumbnail"/>
with:

Code: [Select]
<img src="themes/your_theme_name/images/your_image2.gif" title="Previous Thumbnail"/>
REMEMBER to change your_theme_name with your theme name.

« Last Edit: July 15, 2014, 07:49:59 am by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Responsive filmstrip (filmstrip divs no tables)
« Reply #2 on: May 27, 2014, 10:04:50 pm »

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.


« Last Edit: July 15, 2014, 08:02:50 am by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Responsive filmstrip (filmstrip divs no tables)
« Reply #3 on: May 27, 2014, 10:35:59 pm »

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.
« Last Edit: July 15, 2014, 07:57:40 am by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Responsive filmstrip (filmstrip divs no tables)
« Reply #4 on: May 28, 2014, 02:54:43 am »

SOON I will update first post with: filmstrip with equal height thumbs when thumbnails are set to max aspect in config.
« Last Edit: July 15, 2014, 08:31:03 am by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Responsive filmstrip (filmstrip divs no tables)
« Reply #5 on: July 15, 2014, 08:31:10 am »

I DELETEd everything today 15/07/2014 because was done the wrong way and I replaced all the posts above with the new code.
Logged
Pages: [1]   Go Up
 

Page created in 0.018 seconds with 20 queries.