├── images ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 1_tb.jpg ├── 2_tb.jpg ├── 3_tb.jpg ├── 4_tb.jpg ├── 5_tb.jpg ├── 6_tb.jpg └── sp-loading.gif ├── .gitattributes ├── README.md ├── .gitignore ├── css └── smoothproducts.css ├── index.html └── js ├── smoothproducts.min.js ├── smoothproducts.js └── jquery-2.1.3.min.js /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/1.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/5.jpg -------------------------------------------------------------------------------- /images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/6.jpg -------------------------------------------------------------------------------- /images/1_tb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/1_tb.jpg -------------------------------------------------------------------------------- /images/2_tb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/2_tb.jpg -------------------------------------------------------------------------------- /images/3_tb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/3_tb.jpg -------------------------------------------------------------------------------- /images/4_tb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/4_tb.jpg -------------------------------------------------------------------------------- /images/5_tb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/5_tb.jpg -------------------------------------------------------------------------------- /images/6_tb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/6_tb.jpg -------------------------------------------------------------------------------- /images/sp-loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kthornbloom/Smoothproducts/HEAD/images/sp-loading.gif -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Smoothproducts 2 | A lightweight & simple jQuery product viewer script 3 | 4 | 5 | ## Features 6 | 7 | - Easy to use 8 | - Easy to style 9 | - Responsive 10 | - Handles different image sizes 11 | - 'Quick zoom' on hover with mouse 12 | - Lightbox style full zoom on click 13 | - Handles multiple instances on one page 14 | 15 | ## Usage 16 | 17 | - Add the CSS to your stylesheet, or just call it in your header: 18 | 19 | ```html 20 | 21 | ``` 22 | - Add & call javascript in your footer: 23 | 24 | ```html 25 | 26 | 32 | ``` 33 | - In your HTML, add a wrapper div called "sp-wrap". Inside should be your medium-sized thumbnail images. Each thumbnail should be linked to the higher-resolution version of its self. Use thumbnails of the same width for best results. (You may use different heights) 34 | 35 | ```html 36 |
40 | ``` 41 | - You may add an element with a class of "sp-loading" and style it however you'd like. This div will be removed once the images have loaded and the viewer gets added to the page. 42 | 43 | ```html 44 |
