Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

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

0 Members and 1 Guest are viewing this topic.

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
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

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
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

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
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

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
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

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
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

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
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.029 seconds with 20 queries.