Convert your Photoshop PSD to a JavaScript or jQuery slideshow in a snap. JavaScript slideshows with jQuery support is made simple and easy from any PSD in Photoshop with Export Kit. There are a few simple requirements to build your PSD to JavaScript or jQuery slideshow – once these are met, you can export unlimited JavaScript slideshows from any PSD file.

You will need:
(a) JavaScript slideshow script
(b) Matching PSD layout

Step 1: Your Slideshow Script

Depending on your slideshow needs, you may want to Google “free javascript slideshow script” and download a free JavaScript slideshow script to get you started with your slideshow.

NOTE: You will need to have a general understanding of HTML and JavaScript to create your own custom slideshow or modify an existing one.

NOTE: If you do not understand JavaScript, ask us a question or hire a developer!

Example JavaScript using HTML elements

1
2
3
4
5
6
7
8
9
10
11

//HTML element with the id: #ekslider_nav_left
//Previous Nav
function ekslider_nav_left(){
    return document.getElementById('ekslider_nav_left');
}
 
//HTML element with the id: #ekslider_nav_right
//Next Nav
function ekslider_nav_left(){
    return document.getElementById('ekslider_nav_right');
}

The setup of your JavaScript file is important because the HTML elements the script looks for, are the same PSD layer elements you are required to create. Export Kit makes it easy to map your JavaScript elements to any Photoshop layer element, you only need to know the name, or the class to include in your PSD.

Pure JavaScript Slideshows

1
2
3
4

/*
Eg. element_id
*/
document.getElementById('element_id');

Using document.getElementById is very common in JavaScript and requires a PSD layer with the name of element_id.

Eg. If your JavaScript slideshow is looking for a layer called slide_images then you will need to create that layer/folder in your PSD.

jQuery Slideshows

1
2
3
4
5
6
7
8
9

/*
Eg. element_id
*/
jQuery('#element_id');
 
/*
Eg. element-class
*/
jQuery('.element-class');

Using both queries for id and class are very common in jQuery, so you will need to check the actual script file to see which is used.

Eg. If your jQuery slideshow is looking for a class called .slider-nav-next then you will need to add a ${css|style} tag to a layer in your PSD.

Know Your Slideshow Elements

Regardless of a free or custom JavaScript slideshow script, each slideshow will require its own HTML elements to render correctly. Your JavaScript will add functionality to your PSD layer elements in your slideshow output. This will require you to have a related layer names so your JavaScript file will reference the correct PSD layers.

If you download a JavaScript slideshow script then you will also likely receive instructions on including that script with your website, you will need to mimic the slideshow install instructions in your PSD file.

This process will mostly involve making sure your PSD layer names match the names/classes of the elements in your JavaScript file.

If you created your own custom slideshow script then you will only have to ensure correct id or class references.

Note: Both your JavaScript and PSD file must contain the same elements:
(1) images_container
(2) view_more_icon
(3) nav_next
(4) nav_previous
(5) nav_pause

You will need to have all JavaScript slideshow elements in your PSD file - or the script may cause an error.

Step 2: Your Slideshow PSD

Your PSD layout must be in-sync with your JavaScript slideshow script file. You should have both (a) the same layer/element structure, and (b) have the required layer names/classes in your PSD.

Consider your PSD as the view or GUI for your slideshow and JavaScript will control or add functionality to the view elements.

Example JavaScript Requirements

All JavaScript slideshows will have various features and functionality. You will need to know how your individual slideshow script works and what layers it looks for.

Assuming we have a script that works like this:

(a) Rotates images inside ekslider_images div

In Photoshop: The developer expects you to add image layers inside a folder named ekslider_images, add as many images as you like in your PSD folder.

(b) Adds ekslider_nav_view preview icon on hover

In Photoshop: The developer expects you to add a image layer named ekslider_nav_view anywhere inside your PSD.

(c) Has navigation

1. ekslider_nav_left for previous navigation
2. ekslider_nav_right for next navigation
3. ekslider_nav_pause to pause the image rotation

In Photoshop: The developer expects you to add 3 image layers named ekslider_nav_left, ekslider_nav_right and ekslider_nav_pause anywhere inside your PSD.

Step 3: Export Your Slideshow

When both your JavaScript file and PSD design are in-sync with the layer names and or css classes, you can add your script file to your Custom HEAD.

Example Script Link

1
2

<!-- adds a meta script link to your slideshow -->
<script src="ek126_206_js_slider.js" ></script>

Then customize your output and press Export Now when ready.

Step 4: Copy Your Scripts

Copy your scipt files to your output folder, eg. /ftml-www/html5/ and presto – instant PSD to JavaScript or jQuery slideshow!