Magic Slideshow : How to add Titles and Captions

Author	« Topic »
ITZAP Ecommerce Template Guru Australia 1010 Posts	Posted - 03/30/2015 : 00:52:47 With Magic Slideshow integrated into your Ecommerce Templates Content Management System software, creating impressive slideshows with full screen view option has never been easier. When adding or modifying a product page, simply open the "Image Manager" and commence uploading jpg photos into the "Giant Image" column. (Optimum Giant Image size = max 1920 px wide or max 1080 px high, depending upon the longest dimension.) But did you know that you can in fact ALSO add a Title and/or a Caption to a photo whenever desired ? View a working example here >> It is really not so difficult. Below find a step-by-step guide explaining how. And we will also make the Title and Caption font sizes responsive and mobile friendly. Gary Edited by - ITZAP on 03/30/2015 03:24:45
ITZAP Ecommerce Template Guru Australia 1010 Posts	Posted - 03/30/2015 : 01:08:54 includes.php For a responsive design using 16:9 HD res 1920x1080 ratio photos, you need to have an entry something like this. The critical settings are highlighted in red. ======================================== $magictooloptionsjs="<script type=\"text/javascript\"> MagicSlideshow.options = {'width': '100%', 'height': '56.25%', 'autoplay': true, 'loop': true, 'keyboard': true, 'effect': 'dissolve', 'effect-speed': '1200', 'slide-duration': '6000', 'arrows': true, 'pause': 'hover', 'selectors': 'bottom', 'selectors-style': 'thumbnails', 'selectors-size': '40', 'selectors-eye': true, 'caption': true, 'fullscreen': true, 'preload': false, 'loader': true} </script>"; ======================================== For 4x3 ratio photos, you would make the 'height': '75%' The width of the slideshow is determined by div.detailimage in your CSS file. Edited by - ITZAP on 03/30/2015 03:15:08
ITZAP Ecommerce Template Guru Australia 1010 Posts	Posted - 03/30/2015 : 02:20:30 Product Admin => List Products => Modify Open the "Image Manager" and upload Small, Large and Giant images sized as usual. Uploading a photo into the "Giant Image" column activates Magic Slideshow. You really only need one Small image. After the first photo, set Small Image to "No Small Image" and continue uploading Large and Giant photos. So now in the "Giant Image" column you have a code snippet like this : prodimages/my-product-photo.jpg (1) To add both a Title and a Caption to that photo, you would simply add red code like this onto the end : " title="My Great Product" data-caption="You really cannot go wrong buying this product => Please notice the " quote mark to begin, but there is NO QUOTE on the end. The ECT software adds " quotes " to both beginning and end of this snippet when generating the page content. And so the full code snippet in the Giant Image box will be : prodimages/my-product-photo.jpg" title="My Great Product" data-caption="You really cannot go wrong buying this product => You only need to add this code into the "Giant Image" column. The same Title and Caption will also appear on the Large image view. The Title font size is slightly larger than the Caption. You can choose whether to have both, just Title or just Caption as you like. (2) Title only : " title="My Great Product (3) Caption only : " data-caption="You really cannot go wrong buying this product (4) Title and Caption with Hyperlink : " title="Ecommerce Templates Shopping Cart Software" data-caption="<a href='http://www.ecommercetemplates.com/' title='Visit this website'>Ecommerce software integrated into your website design</a> Edited by - ITZAP on 03/30/2015 02:31:04
ITZAP Ecommerce Template Guru Australia 1010 Posts	Posted - 03/30/2015 : 03:12:34 magicslideshow.default.css Find this in the folder named magicslideshow\themes\default The appearance of the Magic Slideshow Titles and Captions overlayed upon the bottom of a photo are defined in this CSS style sheet. Personally, I didn't particularly like the Grey background and large padding since it obscured a fair portion of the photo. But more critical, the font sizes were not responsive according to the Device Screen Size and remained exactly the same on both Mobile and Desktop. So on a mobile phone the Title and Caption would virtually cover nearly the entire photo. No good at all. So here is the fix. The result you can see live by clicking the link to the Total Store website above. Title and Caption are a Black font color on an opaque white background. Not too large or obtrusive with minimal padding. Font size is reduced on a Small mobile screen in Landscape view. NO Title or Caption at all on Small mobile screen in upright Portrait view. Captions just do not work well on such a small screen width, so in this case we specify "display: none" (1) Make a backup copy of magicslideshow.default.css (2) Scroll down to LINE 99 and find this : * Caption (3) Replace all the .mss-caption styles underneath with this NEW CSS : ======================================== @media only screen and (max-width:30em) { .mss-caption { width: 100%; text-align: center; color: #222222; bottom: 0; left: 0; opacity: 1; } @media only screen and (orientation:portrait) { .mss-caption { display: none; } } } @media only screen and (min-width:30.063em) { .mss-caption { width: 100%; text-align: center; color: #222222; bottom: 0; left: 0; opacity: 1; } } @media only screen { .mss-caption span { font-size: 0.7rem; font-weight: bold; height: auto; line-height: 1.2; background-color: rgba(255, 255, 255, 0.5); position: absolute; left: 0; bottom: 0; padding: 0.3em 2em; } } @media only screen and (min-width:40.063em) { .mss-caption span { font-size: 0.95rem; } } .lt-ie9-magic .mss-caption span { filter: alpha(opacity=100); } @media only screen { .mss-caption-title { font-size: 0.75rem; color: #000000; display: block; } } @media only screen and (min-width:40.063em) { .mss-caption-title { font-size: 1rem; } } .mss-caption a { color: #0033cc; } .mss-caption a:visited { color: #0033cc; } .mss-caption a:hover { color: #0033cc; text-decoration: underline; background-color: transparent; } ======================================== (4) Upload CSS file to server. Test. Modify as desired. Edited by - ITZAP on 03/30/2015 07:38:56
ITZAP Ecommerce Template Guru Australia 1010 Posts	Posted - 03/30/2015 : 03:18:25 Gary
Andy ECT Moderator 95440 Posts	Posted - 03/30/2015 : 07:48:30 Thanks Gary - very helpful as always - I'm sure that's going to prove very useful and the detail in the post really is much appreciated. Andy Please feel free to review / rate our software
	« Topic »