Discussion on jQuery Image Gallery Slideshow with MousePan

Discussion on jQuery Image Gallery Slideshow with MousePan

Cart 515 sales

Tean supports this item


This author's response time can be up to 2 business days.

112 comments found.

Good luck with your sales

Hi there, I was wondering if it is possible with your plugin to change the large image in a slideshow upon mouseover or hover.


Can you explain your question more?


No, sorry that is not possible and it wouldnt be convenient because large images would require longer time to load while user keep hovering other thumbnails.

Hi there, How can I add keyboard shortcut “F” to go Fullscreen and back to Normal with same F key, and Left , Right Direction keys for next and previous slide. At the moment Zoom + is ruining the whole User Experience with having to drag the mouse to the corner and clicking it. And then clicking again to normal view. Any help will be highly appreciated.


Unfortunately there are no keyboard controls in this gallery. This could be achieved with code modifications using something like this:

document.keyup(function(e) { 
    var key = e.keyCode;// detect keycode

    if(key == 70) {//F

... etc


Thank you for that. Could you please give a tip on which file I should add this code format? If there is any example you could link me to I will try to work it out. Its an amazing image gallery its just the User Experience is lacking from Desktop use of this gallery due to full screen and left / right buttons been far. Bringing the buttons closer make the layout look funny :(

This is not the whole code, just the example.

We can modify the plugin only on freelance basis. If you are interested, you can contact us here:

I love your gallery plugin. I’m wondering if there is a way to keep the menu open at all times and get rid of the menu toggle button?


You could call toggleMenuHandler in panGalleryReady callback to open the menu after gallery is ready, but this function is not publicly exposed so you have to add it.

And delete menu_toggle and menu_close buttons from the html.

Hi- I am interested in your player but had one question. Are the images and videos uploaded by the user and then the player is created in real time? or is all the media hard coded?

I would like to hook this up to a dashboard, essentially so that a user could take a photo and upload it to their slider. Then can add the audio they want.

Let me know if your player would be a good base for me to create this. Thanks!

Auto start video is not possible, because the slide is the ‘main’ content shown to the user, then is user wants to play video, it has to be initiated manually.

in your experience, is this comparable with angularjs or ionic?

Compatible in what way? Its written in jquery.

Hi, I’m hoping you can help with an issue I’m happy. In IE, when an image is zoomed in I cannot pan across the image – but this works in all other browsers. Looked in the help section but doesn’t have any info.

Can you please let me know what setting I need to change?


Hi Tean, I have sent the email as requested but after 2 days i haven’t heard anything back. Sorry to chase but I have deadline to meet so any chance I could get a reply soon?


I have replied to your email 2 days ago, please check your spam folder. I have sent another email today.

Gmail moved your email to spam because it contains the js file. The file fixed my issue so thanks!

I just want to insert a basic slideshow on an existing page. What is the best template to use if I am going to use php include to add it to my site?



All templates are the same, they have css and javascript in head and html in body. You can combine css and javascript files for less http requests.

Hi, i’ve a problem. When i set scrollType: ‘scroll’, doesn’t work and the console return a “Uncaught TypeError: Cannot read property ‘reinitialise’ of null” Can u help me?



Send a message at with a link to your webpage so we can have a look.

Hi, awesome slider. But i have 2 question.

1) Is it possible to use sliding effect between images instead of fading ? Like

2) Is it possible to load all images at first and once? Then no loading is required.

Thank you so much.


1. Only fade (alpha) method is currently implemented.

2. No, images load when they get requested.

Hello, how i can generate automatically the thumbnails for the gallery?


To create thumbnails automatically its necessary to load playlist from folder of images, and then thumbnails are going to be created automatically in the process.

1. Open index_buttons_bottom.html demo,

2. in settings set: useDeeplink:false, activeCategory:0,

3. load this playlist (its commented out and located on the beginning of div class=”thumbHolder”):

<div class="category" data-type="folder" data-path="media/images/" />

There is a section in Help document / Playlist types

If you need we cant send you index_buttons_bottom.html demo with such preferences.

Thank you very much. It works perfectly. Also I have another question: it is possible to set one distinct audio file for every category of photos, because now if I change the category the melody remains the same.

Its not possible without recoding. In panGallery file, in initCategory function, you could get new song path, and then use audio player api method loadAudio to load a new audio file.

Hi, is this script scan automatic all folder(s) and read pictures? Thanks


No, images are added through html markup. Only audio mp3 files can be read through folder.

Is not possible to add a php script (or xml?) that can scan and read folder AND insert inside html? Thanks!

There is no such option.


Our one of slide is Google calendar page. Can we insert Google calendar in the slideshow? Can we set the preview slide image on bottom of the page?



No, this gallery supports images and videos, you would need some code editing for that.

Very nice gallery. I am thinking about buying and implementing with my dating site.

Question: Can I have the playlist of thumbnails and pictures created from a database? Can I request additional customizing so that the item details are also read from a databaseand so that gallery work with my dating site?


Thumbnails and picture links come from html markup. Database functionality is not included. Item can be modified on freelance basis.


Can we use fullscreen_toggle for a div where gallery is and not all page.

I use the gallery into a div.


Fullscreen button makes browser go fullscreen, this is not enlarge gallery button, just a html5 fullscreen.

Thank you. I resolved using target instead of document on function toggleFullscreen(). :-)

I forgot that you can do that. Good to hear it works.

Can it work with wordpress?

If you add it manually then it will work. What customization you had in mind?

can u write your email? i want to ask few moere questions

Yes, use contact form in my profile page.

I have purchased this but i dnt find vimeo documentation pls reply

Help file -> Using video

Any responsive version ?


Gallery is responsive, resize the browser to see the effect.


just purchased this.

Deployed it using auto create feature. However the transitions are not smooth from image to image.

When the next image loads the previous image jumps to the Bottom ?

Can you help?


This is how the default transition was coded. Changing it would require modifying jquery.

Hi Tean, we bought gallery-slideshow-with-mousepan plugin. we have three requirements.
1) How do we add div after the image slideshow ( i.e componentWrapper). since componentwrapper height is 100%, what changes are required to add div after componentwrapper. This is to show scrollable content after the slideshow.
            #componentWrapper {
position: absolute;
top: 43px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;

2) We want to add hyper link to the image, since the image is loading in panHolder div what changes are required to add hyper link to the image. ?
3) Slide to slide transition is not smooth. Images pop up from the bottom specially for smaller images. what could be the reason ?

Thanks, Anil


For code modifications you can send the message here:

We sent the message earlier through this url, resent it now.


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey