Spacegallery: image gallery/slideshow made with jQuery

tmirror

Spacegallery: image gallery/slideshow made with jQuery

There are many types of galleries for images that can be found on the internet, but we rarely find one displaying images so differently like this one. Those using Mac OS X will surely notice a lot of similarity with Time Machine and those who don't, I'm sure will enjoy this type of effect for viewing images. SpaceGallery is a JQuery based slideshow / image gallery that performs overlaying in a visually appealing manner and provides a smooth fade out effect to images. This 3D image gallery lets you float through your pictures easily by enlarging them with an Apple-like animation. To see the SpaceGallery slideshow in action, please visit this demo blog and click on the first image: Demo Blog How to Add Spacegallery Image Slideshow to Blogger To implement this gallery is very easy. Just follow the steps below: Step 1 . Log in to your Blogger account and select your blog. Next, go to Template and click the Edit HTML button: Step 2 . Click anywhere on the code area and search by using …

Post a Comment

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1581542668-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7FC-KkphvhnQt4q-PZ7VLBCDAO9w:1765842477466';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5785193505607879239','//helploggertricks.blogspot.com/2013/10/spacegallery-image-galleryslideshow.html?amp\x3d1','5785193505607879239');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '5785193505607879239', 'title': 'Blogger tips, tricks, tutorials and widgets - Helplogger', 'url': 'https://helploggertricks.blogspot.com/2013/10/spacegallery-image-galleryslideshow.html?amp\x3d1', 'canonicalUrl': 'https://helploggertricks.blogspot.com/2013/10/spacegallery-image-galleryslideshow.html', 'homepageUrl': 'https://helploggertricks.blogspot.com/?amp\x3d1', 'searchUrl': 'https://helploggertricks.blogspot.com/search', 'canonicalHomepageUrl': 'https://helploggertricks.blogspot.com/', 'blogspotFaviconUrl': 'https://helploggertricks.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Blogger tips, tricks, tutorials and widgets - Helplogger - Atom\x22 href\x3d\x22https://helploggertricks.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Blogger tips, tricks, tutorials and widgets - Helplogger - RSS\x22 href\x3d\x22https://helploggertricks.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Blogger tips, tricks, tutorials and widgets - Helplogger - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/5785193505607879239/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Blogger tips, tricks, tutorials and widgets - Helplogger - Atom\x22 href\x3d\x22https://helploggertricks.blogspot.com/feeds/3431729640814452514/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/ce4a0ba1ae8a0475', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '3431729640814452514', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVnxU5fvdw8YQp2mIesdv20bJvsHvo_GJlnn6moF1Ji_Xar2l8A24cxf_v1zrYa9I7Z_4erWXf9Hf9F8bAvApJqRDQ56rfyOoZVdLA_lEzDtvRyWid5Ir0gUyrl9oVGXWEoVWa4XtRhVwY/s72-c/create-image-gallery-slideshow-using-jquery-blogger.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVnxU5fvdw8YQp2mIesdv20bJvsHvo_GJlnn6moF1Ji_Xar2l8A24cxf_v1zrYa9I7Z_4erWXf9Hf9F8bAvApJqRDQ56rfyOoZVdLA_lEzDtvRyWid5Ir0gUyrl9oVGXWEoVWa4XtRhVwY/s200/create-image-gallery-slideshow-using-jquery-blogger.png', 'pageName': 'Spacegallery: image gallery/slideshow made with jQuery', 'pageTitle': 'Blogger tips, tricks, tutorials and widgets - Helplogger: Spacegallery: image gallery/slideshow made with jQuery', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Spacegallery: image gallery/slideshow made with jQuery', 'description': '', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVnxU5fvdw8YQp2mIesdv20bJvsHvo_GJlnn6moF1Ji_Xar2l8A24cxf_v1zrYa9I7Z_4erWXf9Hf9F8bAvApJqRDQ56rfyOoZVdLA_lEzDtvRyWid5Ir0gUyrl9oVGXWEoVWa4XtRhVwY/s200/create-image-gallery-slideshow-using-jquery-blogger.png', 'url': 'https://helploggertricks.blogspot.com/2013/10/spacegallery-image-galleryslideshow.html?amp\x3d1', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 3431729640814452514}}, {'name': 'widgets', 'data': [{'title': 'Blogger tips, tricks, tutorials and widgets - Helplogger (Header)', 'type': 'Header', 'sectionId': 'sec_Header_Title', 'id': 'Header01'}, {'title': 'Looking for something?', 'type': 'BlogSearch', 'sectionId': 'sec_Header_Search', 'id': 'BlogSearch01'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'sec_Header_Icon', 'id': 'TextList01'}, {'title': 'Contributors', 'type': 'Profile', 'sectionId': 'sec_Header_Icon', 'id': 'Profile01'}, {'title': 'Bookmark Posts', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList02'}, {'title': 'Translate', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList03'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'sec_Nav_Widgets_1', 'id': 'HTML01'}, {'title': 'Additional Links', 'type': 'PageList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'PageList02'}, {'title': 'Social Links', 'type': 'LinkList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'LinkList04'}, {'title': 'Tabbed Menu', 'type': 'LinkList', 'sectionId': 'sec_Under_Header', 'id': 'LinkList05'}, {'title': 'Pinned Post', 'type': 'FeaturedPost', 'sectionId': 'sec_Top_Widgets', 'id': 'FeaturedPost01', 'postId': '348886673810717388'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'sec_Main_Widgets', 'id': 'Blog01', 'posts': [{'id': '3431729640814452514', 'title': 'Spacegallery: image gallery/slideshow made with jQuery', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVnxU5fvdw8YQp2mIesdv20bJvsHvo_GJlnn6moF1Ji_Xar2l8A24cxf_v1zrYa9I7Z_4erWXf9Hf9F8bAvApJqRDQ56rfyOoZVdLA_lEzDtvRyWid5Ir0gUyrl9oVGXWEoVWa4XtRhVwY/s200/create-image-gallery-slideshow-using-jquery-blogger.png', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'in'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'in'}, {'name': 'location', 'label': 'Location:'}]}, {'title': 'Categorized Posts', 'type': 'LinkList', 'sectionId': 'sec_Main_Widgets', 'id': 'LinkList08'}, {'title': 'Table of contents', 'type': 'HTML', 'sectionId': 'sec_Main_Widgets', 'id': 'HTML11'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'sec_Side_Widgets', 'id': 'PopularPosts01', 'posts': []}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Side_Widgets', 'id': 'Label01'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'sec_Error_404', 'id': 'HTML404'}, {'title': 'Organization [BlogTitle]', 'type': 'Image', 'sectionId': 'sec_Footer_Organization', 'id': 'Image21'}, {'title': 'Social Media Links', 'type': 'LinkList', 'sectionId': 'sec_Footer_Organization', 'id': 'LinkList21'}, {'title': 'Product', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList22'}, {'title': 'Resources', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList23'}, {'title': 'Support', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList24'}, {'title': 'Company', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList25'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'sec_Footer_Bottom', 'id': 'HTML21'}, {'title': 'Mobile Menu', 'type': 'TextList', 'sectionId': 'sec_Mobile_Menu', 'id': 'TextList99'}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Theme_Hidden', 'id': 'Label41'}, {'title': '\u09af\u09cb\u0997\u09be\u09af\u09cb\u0997 \u09ab\u09b0\u09cd\u09ae', 'type': 'ContactForm', 'sectionId': 'sec_Theme_Hidden', 'id': 'ContactForm41'}, {'title': 'Pageviews last month', 'type': 'Stats', 'sectionId': 'sec_Theme_Hidden', 'id': 'Stats41'}, {'title': 'Firebase Configurations', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList61'}, {'title': 'Progressive Web App', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList62'}, {'title': 'Cookie Consent [NoTitle]', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList63'}, {'title': 'Image Uploader', 'type': 'Image', 'sectionId': 'sec_Addon_Widgets', 'id': 'Image61'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header01', 'sec_Header_Title', document.getElementById('Header01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch01', 'sec_Header_Search', document.getElementById('BlogSearch01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList01', 'sec_Header_Icon', document.getElementById('TextList01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile01', 'sec_Header_Icon', document.getElementById('Profile01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList02', 'sec_Header_Icon', document.getElementById('LinkList02'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList03', 'sec_Header_Icon', document.getElementById('LinkList03'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML01', 'sec_Nav_Widgets_1', document.getElementById('HTML01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList02', 'sec_Nav_Widgets_2', document.getElementById('PageList02'), {'title': 'Additional Links', 'links': [{'isCurrentPage': false, 'href': '/p/sitemap.html', 'title': 'Sitemap'}, {'isCurrentPage': false, 'href': '#', 'title': 'Disclaimer'}, {'isCurrentPage': false, 'href': '#', 'title': 'Privacy'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList04', 'sec_Nav_Widgets_2', document.getElementById('LinkList04'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList05', 'sec_Under_Header', document.getElementById('LinkList05'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost01', 'sec_Top_Widgets', document.getElementById('FeaturedPost01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog01', 'sec_Main_Widgets', document.getElementById('Blog01'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2485970545-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList08', 'sec_Main_Widgets', document.getElementById('LinkList08'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sec_Main_Widgets', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts01', 'sec_Side_Widgets', document.getElementById('PopularPosts01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label01', 'sec_Side_Widgets', document.getElementById('Label01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'sec_Error_404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image21', 'sec_Footer_Organization', document.getElementById('Image21'), {'resize': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList21', 'sec_Footer_Organization', document.getElementById('LinkList21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList22', 'sec_Footer_Widgets', document.getElementById('LinkList22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList23', 'sec_Footer_Widgets', document.getElementById('LinkList23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList24', 'sec_Footer_Widgets', document.getElementById('LinkList24'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList25', 'sec_Footer_Widgets', document.getElementById('LinkList25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'sec_Footer_Bottom', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList99', 'sec_Mobile_Menu', document.getElementById('TextList99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label41', 'sec_Theme_Hidden', document.getElementById('Label41'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm41', 'sec_Theme_Hidden', document.getElementById('ContactForm41'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': '\u09af\u09cb\u0997\u09be\u09af\u09cb\u0997 \u09ab\u09b0\u09cd\u09ae', 'blogId': '5785193505607879239', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'AOuZoY6DQtrQ19HyDdoQt493jj7klmKEWQ:1765842477467', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats41', 'sec_Theme_Hidden', document.getElementById('Stats41'), {'title': 'Pageviews last month', 'showGraphicalCounter': false, 'showAnimatedCounter': false, 'showSparkline': true, 'statsUrl': '//helploggertricks.blogspot.com/b/stats?amp\x3d1\x26style\x3dBLACK_TRANSPARENT\x26timeRange\x3dLAST_WEEK\x26token\x3dAPq4FmB5LEY-I5qgF9FnLKj_kHrGtRw9t3TVO7TUwA-zEde-rm9z0oj_fMo6xceghZV3fSQ7jw-GlXwIaTwfRWrlt3xlQMQkIA'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList61', 'sec_Addon_Widgets', document.getElementById('LinkList61'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList62', 'sec_Addon_Widgets', document.getElementById('LinkList62'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList63', 'sec_Addon_Widgets', document.getElementById('LinkList63'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image61', 'sec_Addon_Widgets', document.getElementById('Image61'), {'resize': false}, 'displayModeFull'));
</script>
</body>