Creating rotating image slider using wordpress data manager

Today we will show you how you can create special gallery, using our wordpress data manager. This tutorial may be useful for wordpress theme developers and wordpress plugin developers.

Create rotating image gallery with wordpress data manager screen 01

Create rotating image gallery with wordpress data manager screen 01

Today we will integrate a special gallery on pages we would like to based on Jquery plugin : Rotating Image slider

Please download the code and unzip it.

Create rotating image gallery with wordpress data manager screen

Create rotating image gallery with wordpress data manager screen

Please, place jquery code at js directory at our theme:

create gallery with wordpress data manager screen

create gallery with wordpress data manager screen

In order to best fit your design copy from css/style.css all lines starting .rm_wrapper to your theme style files:

Create rotating image gallery with wordpress data manager screen 2

Create rotating image gallery with wordpress data manager screen 2

Open index.html and copy html code div of class rm_wrapper to new php file at your theme:

 

Create rotating image gallery with wordpress data manager screen 3

Create rotating image gallery with wordpress data manager screen 3

Also copy button images from images directory to images directory at your theme:

 

Create rotating image gallery with wordpress data manager screen 4.png

Create rotating image gallery with wordpress data manager screen 4.png

Now update image url at css style to be url(images/pic.name) from url(../images/pic.name)

Create rotating image gallery with wordpress data manager screen 5

Create rotating image gallery with wordpress data manager screen 5

Now we have to enque jquery scripts to our theme

We will replace this code at index.html:

Create rotating image gallery with wordpress data manager screen 6

Create rotating image gallery with wordpress data manager screen 6

With script enque function.

Open functions.php at your theme and look for a function that enques scripts. If there is no such function create it. Get Code

Create rotating image gallery with wordpress data manager screen 7

Create rotating image gallery with wordpress data manager screen 7

Ok, now we will create base for our images with data manager, so user will be able to manage images at his site.

Step 1:

Go to Form Settings. Press “Add” and create form Name it my gallery. This will create table named “mygallery” at wordpress database.

Create rotating image gallery with wordpress data manager screen 8

Create rotating image gallery with wordpress data manager screen 8

Stage 2: Go to Fields and Views and  create 3 fields: image, Alt and category

Create rotating image gallery with wordpress data manager screen 9

Create rotating image gallery with wordpress data manager screen 9

Create rotating image gallery with wordpress data manager screen 10.png

Create rotating image gallery with wordpress data manager screen 10.png

After each saving you will be asked to save new form design. Data manager dynamically generates default view. You should approve saving form design:

 

Create rotating image gallery with wordpress data manager screen 13

Create rotating image gallery with wordpress data manager screen 13

Create rotating image gallery with wordpress data manager screen 11

Create rotating image gallery with wordpress data manager screen 11

Create rotating image gallery with wordpress data manager screen 12

Create rotating image gallery with wordpress data manager screen 12

Ok, now we should upload our images using “Test your form” page:

Create rotating image gallery with wordpress data manager screen 14

Create rotating image gallery with wordpress data manager screen 14

Gallery needs 16 images to work. Upload your client images to the site. Don’t forget to use Alt to describe the images and also name images according to your page subject. That will help with SEO.

Ok, now is coding part. Remember we started editin php file with code from index.html?

Now we will create code that gets all images from gallery table we just created. Then we will output images to html.

Please call the php file you just created : sidebar-mainGallery.php

Open PHP tags at the beginning of the page : Get Code

Add line that gets all the photos from the mygallery table:
//gets all gallery photos
$mygalleryPhotos = $wpdb->get_results( "select * from mygallery where category='main gallery'", OBJECT );

Now initiate first variables:
//first initiations
$countInPage=0;
//will contain first displayed photos
$firstImages = array();
//will contains 4 parts of switching photos

At the original gallery we have 5 parts:
First part contains first photos that are shown with gallery initiation
4 Parts of switching photos. Each part contains 4 photo to one of four positions. Each time container rotates, next photo selected from container.
So we will go over our photos and add them to each part accordingly like in the loop:

Create rotating image gallery with wordpress data manager screen 18

Create rotating image gallery with wordpress data manager screen 18

Ok All parts prepared. No we can close code and start printing gallery:

Create rotating image gallery with wordpress data manager screen 16

Create rotating image gallery with wordpress data manager screen 16

Get Code

Ok , we almost finished! Now we just have to insert using of needed sidebar whenever we want at our theme.
For example you can add this code at header.php of your theme:

Create rotating image gallery with wordpress data manager screen 17

Create rotating image gallery with wordpress data manager screen 17

Get Code

Now, if you would like to test your theme, go to wanted post and add custom field “hasGallery” with “true” value

Contact us to get a free trial version

Agree to User Agreement

Create rotating image gallery with wordpress data manager screen 15

Create rotating image gallery with wordpress data manager screen 15