Shopdra - Decisive Web Solutions

Configuring Film Strip Slider (Jquery Plugin)

Shopdra Film Strip Slider can be easily integrated your website. It supports every website, doesn't matter which technology/platform you are using with your website.

Requirements

Only requirement for this plugin is Jquery.

Installation

When you download .zip file ( Thank you again for choosing us ! ), extract all files.

You will find extra demo & documentation files with main plugin folder. After this point whenever we mention any file/folder, this means that we are talking about files/folders inside plugin folder (shopdra-film-strip)

Open up html codes of the page, that you want to integrate this plugin.
Between head tags of your page, insert plugin's css file.

your_html_page.html
        <head> 
          ...
          ...
            <link rel="stylesheet" href="shopdra-film-strip/shodpra-film-strip.css" />
          ...
          ...
        </head>

Before your body tag closed, insert plugin's javascript file.

Please keep in mind that plugin's js file has to be added after your Jquery.js file.

Customize your plugin in another script tag after main plugin's javascript file.

More explanation about Plugin Settings

your_html_page.html
          <body> 
            ...
            ...
              <script src="jquery.min.js"></script>
              <script src="shopdra-film-strip/shopdra-film-strip.js"></script>
              <script>
                ..........YOUR PLUGIN'S SETTINGS ..........
              </script>
          </body>

Finally, add plugin's div to anywhere between body tags.

You can put this div to anywhere between body tags it doesn't matter for the fixed layouts.

For include content layouts, you should put it where you want to use Film Strip Slider.

your_html_page.html
                    <body> 
                      ...
                      ...
                        <div id="shopdra-film-strip-slider"></div>
                      ...
                      ...
                    </body>

Plugin Settings

All plugin's settings will be inside script tags that register after plugin's javascript file.

If you want you can create a different file for your plugin's settings and register it from outside as well.

Settings

Type: Layout Types, you need to use variables from table.
Duration: It defines slide duration/speed for each card. (ms)
CardWidth: Width of Card. (px)
CardHeight: Height of Card. (px)
Enable You can show/hide plugins according to screen size. More Details about Screen Sizes
OpenLinkInDifferentTab If you use links in your cards/images, you can select whether this link opens in same or different tab. It affects all cards. Default: false

your_html_page.html
    <body> 
      ...
      ...
        <script src="jquery.min.js"></script>
        <script src="shopdra-film-strip/shopdra-film-strip.js"></script>
        <script>

          /* ********************** General Settings ********************** */

          const settings = {
            type: "FIXED_TOP",
            duration: 7000,       // ms
            cardWidth: 300,       // px
            cardHeight: 225,      // px
            // If you want to disabled plugin in any screens please turn this to false.
            enable: {
              xs: true,             //          xs < 600px
              sm: true,             // 600px  < sm < 960px
              md: true,             // 960px  < md < 1264px
              lg: true              // 1264px < lg 
            },
            openLinkInDifferentTab: false
          };

          /* ***************** Your Image & Link Settings **************** */
          const cards = [
            {
              imgSrc: "https://YOUR_IMAGE_URL",
              link: "https://YOUR_LINK"
            },
            {
              imgSrc: "https://YOUR_IMAGE_URL",
              link: "https://YOUR_LINK"
            },
            {
              imgSrc: "https://YOUR_IMAGE_URL",
              link: "https://YOUR_LINK"
            },
          ];

          // This passes your settings and cards into main function
          $("#shopdra-film-strip-slider").shopdraFilmStrip(settings, cards);

        </script>
      </body>

If you have any questions, you can create a help request from here

Classes Table

Layout type in the plugin's settings should be selected from table below.

your_html_page.html
            const settings = { 
              type: "FIXED_TOP",
              ...
            }
            const cards = [ ... ]

Horizontal Layouts

"FIXED_TOP" Film Strip Slider always will be at the top of your screen. Go To Demo
"FIXED_BOTTOM" Film Strip Slider always will be at the bottom of your screen. Go To Demo
"ABSOLUTE_TOP" Film Strip Slider will be placed at the top of your screen but it may disappear when one scroll down. Go To Demo
"CONTENT" Film Strip Slider can be put anywhere that you want. It gets parent element width automatically. Go To Demo

Vertical Layouts

"FIXED_LEFT" Film Strip Slider always will be at the left side of your screen. Go To Demo
"FIXED_RIGHT" Film Strip Slider always will be at the right side of your screen. Go To Demo

Screen Sizes

#	Screens Between (px)	Scale
xs	< 600	0.47
sm	600 - 960	0.6
md	960 - 1264	0.76
lg	1264 >	1.00

Scale

is applied for getting better User Experience (to make film strip responsive) in the different screen sizes. This number multiplies with Card.Width and Card.Height

Changelog

Version 1.0.0 - Initial Release

Documentation