NoobSlide is one of the most versatile, efficient, and compelling Javascript galleries I have seen. Many thanks to its creators for making something so awesome!
NoobSlide is now part of the Shiba Gallery Plugin so that you may insert its galleries into your blog with a simple WordPress gallery shortcode.
Below are the 8 common NoobSlide examples (with very slight modifications) integrated into the WordPress gallery system. I have also added 3 more galleries using the NoobSlide system that is reminiscent of Galleria, SlideViewer and NativeX.
[Header and footer images from Tattoo Girls WordPress Theme.]
NoobSlide Sample 1
[gallery id="1969" type="noobslide_1"]
NoobSlide Sample 2
[gallery id="1969" type="noobslide_2"]
NoobSlide Sample 3
[gallery id="1969" type="noobslide_3"]
NoobSlide Sample 4
[gallery type="noobslide_4" numberposts="22" recent="1"]
How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text
We modify the WordPress Gutenberg editor so that we can use free-form text blocks as before and combine them with the power of blocks. In this way, we get the new power of Gutenberg blocks without losing our previous ability to smoothly write text without the cumbersome blocks interface.
Migrating Your WordPress Website to Amazon EC2 (AWS)
I describe how I migrated my WordPress sites onto an Amazon EC2 instance. I discuss the problems that arose during migration and how I fixed them.
How to Set-Up SFTP on Amazon EC2 (AWS)
This article describes how I set up a separate SFTP account on my Amazon EC2 server. We also describe how to use those SSH keys with WordPress.
How to Prevent Gutenberg Autop from Messing Up Your Code, Shortcodes, and Scripts
One of the biggest problems with Gutenberg autop for me is that it messes up my code, WordPress shortcodes, and scripts. Most of my articles were written before Gutenberg, and if I edit any of them using Gutenberg, my code blocks get all their formatting totally messed up. This article describes [...]
How to Create a WordPress Website on Amazon EC2 (AWS)
After a long-hiatus, I once again caught the web-bug and decided to get back to experimenting with my websites. My first project was to migrate my sites from Media Temple over to Amazon AWS. The key reasons for this - Much much better price point. I would be paying about a third or less of [...]
How to Make Poll Daddy Objects Mobile Responsive
Currently, the standard Poll Daddy objects that I use are fixed width and not mobile responsive. Here are some simple CSS styles that I use to make Poll Daddy objects responsive to small devices. 1. Scale poll object to fit the screen. The first step is to add some styles to scale my Poll [...]
Genesis Skins 1.5
Genesis skins allows you to flexibly create and assign skins to different posts, pages, or other custom post types. We can assign skins to an individual post or to groups of posts through the use of categories and tags. Skins are created through a graphical UI based on the WordPress theme [...]
Shiba Media Library 3.7
The main addition to this release is an expansion on the media manager search interface- Posts, pages, and custom post types can now be searched for and added into galleries from the media manager interface. Image search is performed based on title as well as alt text. Shiba Media Library [...]
How to Expand the WordPress Media Manager Interface
This is an advanced tutorial on how to expand the WordPress media manager interface with new options. In particular, I want to expand the drop-down menu in the media manager menu so that I can do searches based on posts, pages, and custom post types, as well as include their thumbnails into my [...]
Shiba Gallery 4.3
This is a very big update, so please try things out on a test site first. Feel free to post bug reports here or in the main Shiba Gallery article. New features for Shiba Gallery 4.3 – 1. Client Responsive Galleries The biggest addition to this release is client responsive galleries. [...]
Google Authorship - Good or Bad for Search Traffic?
One of the things that I truly enjoy about online interactions is that we are more free from the biases and prejudices that are associated with physical appearance. In the real world, We form first impressions from faces despite warnings not to do so. Moreover, there is considerable agreement [...]
Shiba Widgets 2.0
The key feature added in Shiba Widgets 2.0 is the ability to render widgets in posts using shortcodes. [Full Shiba Widgets description] Below are a list of standard widgets including their specialized input parameters. Common input parameters to all widgets include - before_title [...]
Using CDN Cnames with w3tc and MultiSite
Recently, I started using Cnames for my CDN setup. This allows my static CDN content to have a pretty url that is tied to my own domain. Here I discuss how I set-up a Cname for my Media Temple dv server and CloudFront CDN. Then, I highlight a loading issue I encountered with w3tc multisite [...]
Shiba Skins WordPress Theme
Shiba Skins allows you to assign images, colors, and more on a page by page basis. Theme customization options are saved into a skin, which we can then be applied to a specific post or to a group of post objects. Shiba Skins contains similar skinning functionality as Genesis Skins, but is [...]
How to Add the Media Manager Menu to the Theme Preview Interface
WordPress 3.4 added a great theme preview interface that allows us to easily customize theme options (colors, images, menus, and more), as well as quickly view those updates on a theme preview frame. WordPress 3.5 added a new media manager interface that is fast, easy to use, and awesome to [...]
Debugging the w3tc Page Cache
Recently, I had a strange issue where some pages on my multisite were being cached, and others were not. There seemed to be no clear pattern as to what got cached and what failed the cache test. At first, it seemed a bit daunting to jump into the w3tc page caching code, but it actually turned [...]
How to Translate blogs.dir CDN Files in w3tc
My main site has a WordPress Multisite setup that is divided based on directories. For example, My dog articles are in http://shibashake.com/dog/ and My art galleries are in http://shibashake.com/blog-art. In this setup, my image links look something like this - http://shibashake.com/dog/files/2012/12/dog-image1.jpg [...]
How to Create Dynamic User Agent Groups in w3tc
Currently, in the w3tc plugin, we can create user agent groups by specifying agent names, e.g. android or iphone. By using this function, we can create different caches for different sets of devices. On my blogs, I need to create different caches based on screen width. This is because I serve [...]
How to Selectively Load Plugins for Specific Pages
In a previous article, we considered how to selectively disable certain plugin functions, in order to enhance page speed. I.e., only run expensive plugin functions on page content that needs it. Disabling plugin functions may help to save us some time and resources. However, the plugin files [...]
WordPress Theme Customizer Javascript Interface
Here, we focus on understanding the javascript nuts and bolts of the WordPress theme customizer interface. This will allow us to - Extract and change theme customizer settings. Extract and change theme customizer controls. Call theme customizer functions, such as refreshes and more. [...]
Mobile Responsive Galleries and Images
Different approaches for responsive galleries and images, including their pros and cons.
How to Add the WordPress 3.5 Media Manager Interface - Part 2
How to make some simple customization to the WordPress 3.5 media manager interface.
Show:
NoobSlide Sample 5
[gallery id="1969" type="noobslide_5"]
NoobSlide Sample 6
[gallery id="1969" type="noobslide_6" responsive="aspect"]
NoobSlide Sample 7
[gallery id="1969" type="noobslide_7"]
NoobSlide Sample 8
[gallery type="noobslide_8" numberposts="22" recent="1"]
How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text
We modify the WordPress Gutenberg editor so that we can use free-form text blocks as before and combine them with the power of blocks. In this way, we get the new power of Gutenberg blocks without losing our previous ability to smoothly write text without the cumbersome blocks interface.
Migrating Your WordPress Website to Amazon EC2 (AWS)
I describe how I migrated my WordPress sites onto an Amazon EC2 instance. I discuss the problems that arose during migration and how I fixed them.
How to Set-Up SFTP on Amazon EC2 (AWS)
This article describes how I set up a separate SFTP account on my Amazon EC2 server. We also describe how to use those SSH keys with WordPress.
How to Prevent Gutenberg Autop from Messing Up Your Code, Shortcodes, and Scripts
One of the biggest problems with Gutenberg autop for me is that it messes up my code, WordPress shortcodes, and scripts. Most of my articles were written before Gutenberg, and if I edit any of them using Gutenberg, my code blocks get all their formatting totally messed up. This article describes [...]
How to Create a WordPress Website on Amazon EC2 (AWS)
After a long-hiatus, I once again caught the web-bug and decided to get back to experimenting with my websites. My first project was to migrate my sites from Media Temple over to Amazon AWS. The key reasons for this - Much much better price point. I would be paying about a third or less of [...]
How to Make Poll Daddy Objects Mobile Responsive
Currently, the standard Poll Daddy objects that I use are fixed width and not mobile responsive. Here are some simple CSS styles that I use to make Poll Daddy objects responsive to small devices. 1. Scale poll object to fit the screen. The first step is to add some styles to scale my Poll [...]
Genesis Skins 1.5
Genesis skins allows you to flexibly create and assign skins to different posts, pages, or other custom post types. We can assign skins to an individual post or to groups of posts through the use of categories and tags. Skins are created through a graphical UI based on the WordPress theme [...]
Shiba Media Library 3.7
The main addition to this release is an expansion on the media manager search interface- Posts, pages, and custom post types can now be searched for and added into galleries from the media manager interface. Image search is performed based on title as well as alt text. Shiba Media Library [...]
How to Expand the WordPress Media Manager Interface
This is an advanced tutorial on how to expand the WordPress media manager interface with new options. In particular, I want to expand the drop-down menu in the media manager menu so that I can do searches based on posts, pages, and custom post types, as well as include their thumbnails into my [...]
Shiba Gallery 4.3
This is a very big update, so please try things out on a test site first. Feel free to post bug reports here or in the main Shiba Gallery article. New features for Shiba Gallery 4.3 – 1. Client Responsive Galleries The biggest addition to this release is client responsive galleries. [...]
Google Authorship - Good or Bad for Search Traffic?
One of the things that I truly enjoy about online interactions is that we are more free from the biases and prejudices that are associated with physical appearance. In the real world, We form first impressions from faces despite warnings not to do so. Moreover, there is considerable agreement [...]
Shiba Widgets 2.0
The key feature added in Shiba Widgets 2.0 is the ability to render widgets in posts using shortcodes. [Full Shiba Widgets description] Below are a list of standard widgets including their specialized input parameters. Common input parameters to all widgets include - before_title [...]
Using CDN Cnames with w3tc and MultiSite
Recently, I started using Cnames for my CDN setup. This allows my static CDN content to have a pretty url that is tied to my own domain. Here I discuss how I set-up a Cname for my Media Temple dv server and CloudFront CDN. Then, I highlight a loading issue I encountered with w3tc multisite [...]
Shiba Skins WordPress Theme
Shiba Skins allows you to assign images, colors, and more on a page by page basis. Theme customization options are saved into a skin, which we can then be applied to a specific post or to a group of post objects. Shiba Skins contains similar skinning functionality as Genesis Skins, but is [...]
How to Add the Media Manager Menu to the Theme Preview Interface
WordPress 3.4 added a great theme preview interface that allows us to easily customize theme options (colors, images, menus, and more), as well as quickly view those updates on a theme preview frame. WordPress 3.5 added a new media manager interface that is fast, easy to use, and awesome to [...]
Debugging the w3tc Page Cache
Recently, I had a strange issue where some pages on my multisite were being cached, and others were not. There seemed to be no clear pattern as to what got cached and what failed the cache test. At first, it seemed a bit daunting to jump into the w3tc page caching code, but it actually turned [...]
How to Translate blogs.dir CDN Files in w3tc
My main site has a WordPress Multisite setup that is divided based on directories. For example, My dog articles are in http://shibashake.com/dog/ and My art galleries are in http://shibashake.com/blog-art. In this setup, my image links look something like this - http://shibashake.com/dog/files/2012/12/dog-image1.jpg [...]
How to Create Dynamic User Agent Groups in w3tc
Currently, in the w3tc plugin, we can create user agent groups by specifying agent names, e.g. android or iphone. By using this function, we can create different caches for different sets of devices. On my blogs, I need to create different caches based on screen width. This is because I serve [...]
How to Selectively Load Plugins for Specific Pages
In a previous article, we considered how to selectively disable certain plugin functions, in order to enhance page speed. I.e., only run expensive plugin functions on page content that needs it. Disabling plugin functions may help to save us some time and resources. However, the plugin files [...]
WordPress Theme Customizer Javascript Interface
Here, we focus on understanding the javascript nuts and bolts of the WordPress theme customizer interface. This will allow us to - Extract and change theme customizer settings. Extract and change theme customizer controls. Call theme customizer functions, such as refreshes and more. [...]
Mobile Responsive Galleries and Images
Different approaches for responsive galleries and images, including their pros and cons.
How to Add the WordPress 3.5 Media Manager Interface - Part 2
How to make some simple customization to the WordPress 3.5 media manager interface.
NoobSlide Sample Galleria
[gallery id="1969" type="noobslide_galleria"]
NoobSlide Sample SlideViewer
[gallery id="1969" type="noobslide_slideviewer"]
NoobSlide Sample NativeX
[gallery type="noobslide_nativex" numberposts="6" recent="1"]
How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text
We modify the WordPress Gutenberg editor so that we can use free-form text blocks as before and combine them with the power of blocks. In this way, we get the new power of Gutenberg blocks without losing our previous ability to smoothly write text without the cumbersome blocks interface.
Migrating Your WordPress Website to Amazon EC2 (AWS)
I describe how I migrated my WordPress sites onto an Amazon EC2 instance. I discuss the problems that arose during migration and how I fixed them.
How to Set-Up SFTP on Amazon EC2 (AWS)
This article describes how I set up a separate SFTP account on my Amazon EC2 server. We also describe how to use those SSH keys with WordPress.
How to Prevent Gutenberg Autop from Messing Up Your Code, Shortcodes, and Scripts
One of the biggest problems with Gutenberg autop for me is that it messes up my code, WordPress shortcodes, and scripts. Most of my articles were written before Gutenberg, and if I edit any of them using Gutenberg, my code blocks get all their formatting totally messed up. This article describes [...]
How to Create a WordPress Website on Amazon EC2 (AWS)
After a long-hiatus, I once again caught the web-bug and decided to get back to experimenting with my websites. My first project was to migrate my sites from Media Temple over to Amazon AWS. The key reasons for this - Much much better price point. I would be paying about a third or less of [...]
How to Make Poll Daddy Objects Mobile Responsive
Currently, the standard Poll Daddy objects that I use are fixed width and not mobile responsive. Here are some simple CSS styles that I use to make Poll Daddy objects responsive to small devices. 1. Scale poll object to fit the screen. The first step is to add some styles to scale my Poll [...]
Love what you’ve done. Is there a way to make the thumbnails be on just one side of Noobslide-6?
It may be possible to change just the styles for noobslide_thumb to show the thumbnails in a vertical configuration. Otherwise, some HTML edits may be necessary. Here is an article on how to create your own noobslide gallery within the plugin.
http://shibashake.com/wordpress-theme/create-your-own-noobslide-gallery
Can this plugin be used on one page I’m using easy fancybox for my photo galleries and want to install the noobslide for one specific page.
Yeah swapping in plugins based on post or page ID is an interesting issue. Here is something I did with wp-syntax to only load it on relevant posts-
http://shibashake.com/wordpress-theme/the_content-filter-optimizing-your-wordpress-plugins
For what you describe above, it may be possible to just install the plugin but leave it deactivated. Then just load the plugin file as necessary. Never tried this before though, so not sure how well that will work. The problem is that page ID is only available after the wordpress loop gets initiated, but most plugins (including Shiba Gallery) hooks into the init and admin_init actions which fire before the WP loop.
Hi. I really like your slider. I’m not really familiar with Jquery at all so I’m having a little trouble editing it. I’m working with Noobslide_4 and am trying to replace the numbers at the bottom with the Featured Image.
Ideally, I’m going for an end result that looks like this: http://teamollie.com/dogs.php
Do you have any tips / suggestions?
Do you mean you want to replace the numbers with the picture thumbnails? There is an example of this in noobslide_nativex. The Featured Image should already appear on the summary panel.
If you want the featured image to appear larger, and for the thumbs to appear at the side, then you want to play around with the HTML and CSS style of the elements. It may take some work though.
Hi I guess the Nativex is more of what I”m looking for but I do need to make some modifications. I’m not too familiar with javascript but I’m pretty comfortable with HTML and CSS. In the end I am going for something pretty similar to the website I sent you. Is there an easy way to remove the “Next / Previous” feature and the Play buttons? How would one go about shifting the featured images to the right — instead of underneath?
Here is a tutorial on how to create your own noobslide gallery for the plugin by integrating together elements from multiple different galleries-
http://shibashake.com/wordpress-theme/create-your-own-noobslide-gallery
Hi ShibaShake,
Is it possible to add a URL to each slide using the Shiba gallery?
e.g. link to google (or somewhere) from one of the images?
Thank you
Yeah the best way to do that, is to standardize WordPress link objects to become custom post types. However, that can only be done by WordPress.
On my own sites I have expanded link objects so that they can be linked to an attachment object. Then when that attachment object is included in the gallery, the link object information gets shown. However, this is not a very elegant solution, and is probably only for the short term. Therefore, I did not include it in the plugin.