Demo, usage example and configuration http://jgallery.jakubkowalczyk.pl.
jakubkowalczyk-pl / jgallery Goto Github PK
View Code? Open in Web Editor NEWJavaScript photo/video/HTML gallery with albums and preloader
JavaScript photo/video/HTML gallery with albums and preloader
Demo, usage example and configuration http://jgallery.jakubkowalczyk.pl.
The invisible prev/next divs on top of the active image are not clickable anymore due to height: 0px
Hi. If using swipeEvents:true
on desktop, when you drag an image it stuck as soon as cursor leave the image (i.e. go outside the gallery or hover over navigation arrows). If you mouseup before cursor leave the image it swipe normally.
Is there a way to enable swipeEvents only for touch devices and disable for desktop?
Also, if swipeEvents:false
on touch devices you can't go to next/previous images after gallery load, because navigation arrows appear only after you click on some of the icons (i.e. change zoom or start/stop slideshow).
Thanks!
1.1.6 is working with the new full screen pop from standard view. Thank you for adding that.
Is it possible once the user clicks on the "zoom" icon to move the image around or move the users view so that they can see other parts of the image?
The client wants to use an image of 3240x4320 to show off detailed work on the images but right now when the image is "zoomed in" most of the image is off screen.
Please let me know if this enhancement is one that you would be willing to add.
Please add transition effects like
fadeOut_fadeIn
fadeIn_fadeOut
fadeIn_fadeIn
fadeOut_fadeOut
I want to add next and prev buttons at the nav-bottom, but do not know how the click event. I hope you can help me
Hi,
First of all Thank you for this great script.
I had 2 problems:
1.I would love to make the thumbnail responsive on smartphone.
2. How can I used all photos from directory or folder.
Thank you.
When thumbnails position left or right 'Up' arrow doesn't work. Thumbnails doesn't scroll up. 'Down' arrow works fine.
Thanks.
Orientation of the image described in exif tags is not used to rotate automatically the image.
In thumnail list, the orientation is correct but in the main area, the image is not rotated
Hi!
It would be great if 'transitionBackward' value can be opposite to 'transition' value automaticallly. So you don't need to set both of them.
(Summary as title)
Using standard mode as in the url below.
http://jgallery.jakubkowalczyk.pl/customize-standard#/images/large/1.jpg
Reduce the browser width to simulate a mobile width. You will be in the right mode once the thumbnail list disappears.
You cannot navigate to the next and previous photos. Neither by clicking nor swiping.
I have verified this with a mobile phone too. However, due to the demo customization menu on the right, orient the phone to landscape to be able to see the jGallery (page refresh may be needed).
Is there a way to specify which image to start at?
It would be nice to be able to specify in the jgallery call the index of the image to display.
For instance I want to put an image on my website that exists in the jgallery and when a user clicks on it the jgallery opens with that image as the currently selected image.
Is this likely to be a future feature?
Left and right swipe works for changing the image. How can I swipe up and down the page,this is swiping up and down on the jgallery control?
I have touchswipe.js referenced. Left and right works. But up and down does not. Makes it difficult to scroll the page when the gallery is quite large.
This occurs on the demo once the images are loaded. Cannot swipe up and down the page. By swiping on the image.
http://jgallery.jakubkowalczyk.pl/#/images/large/1.jpg
I have tried adding allowPageScroll: 'vertical' to the .swipe() calls without success.
thank you
Might be a good idea to change the plugin classes to not use such generic classes as I am running into conflicts with my site wide layout and utility classes like 'container' and 'btn'.
Thanks again for the apendTo and mode functions. loving the plugin so far. also love that you are utilizing 'fontawesome' as I and already use that in all of my builds!
If you disable all CSS styles on the page with jGallery, you can see the same thumbnail images to be loaded several times. This is considered as bad SEO practice. Any thoughts on how to solve this?
Thanks!
Hi! Do you plan to updated Font Awesome to version 4? It was released more than 6 month ago, but jgallery still use version 3.
Thanks!
Good day, how to add custom button near zoom and fullscreen buttons?
i am using this plugin for my project to show photos , every thing works perfect but
it shows the complete path in the url for your information i am using codeigniter framework.
please help me to solve this
When i try to access the demo page, the website is continuously loading.
I'm currently sifting through the jgallery.min.js file and I may be overlooking it, but I cannot seem to find a way to set the gallery default to a 'scale-to-fit' approach. I'm going to try and modify it so the 'resize' option can be toggled as true or false.
hi
the tooltip functionality don't work in my gallery.
I've try to add:
tooltips: true
tooltipSeeAllPhotos: 'See all photos'
tooltipSlideshow: 'Slideshow'
but that didn't help either
can you please help ?
thanks
When I upgraded to v1.3.1, I get the following error when I set the transition to random:
TypeError: 'undefined' is not an object (evaluating 'G[0]')
When one clicks on the next or previous link or on a thumbnail to load a slide, the loader appears with the opaque background and then the loader and background disappear and the same slide still shows for a time before the next slide loads. Users seem to think that slides are loading twice due to the timing of the loader disappearing and the new slide animation starting, etc.
It seems timing the animation closer to or at the same time the loader and background disappear would be better and not give the impression the same slide is loading twice before the next.
i want to add label to show the description for each album
Zoom is working fine, but the problem is that you can't drag the image when it's zoomed. Tested on Andriod/Chrome and iOS/Safari.
Thanks.
in "mode":"standard" I need to have the "zoom in" button kick the view to full screen or allow users to move their view around the larger image when its inside the small window.
If there is already a way to accomplish either of these tasks please let me know asap @ [email protected]
ty
preload next image when showing the current one, so that the user has not to wait for it when he clicks 'next button'
Hi! It would be great if you can add something like 'zoomSizeFullscreen' parameter. To make it possible set different zoom size for regular gallery and fullscreen mode.
For some images it is great to show them in 'fill' size in regular gallery mode and 'original' size in fullscreen.
Thanks!
My client was wondering if it was possible to add text below the icons or add hover tool-tip text to the icons for those who may not understand what the icon stands for.
In jGallery.min.js
"fa change-mode jgallery-btn jgallery-btn-small fa-expand" to hover the words "Full Screen"
"fa resize jgallery-btn jgallery-btn-small fa-search-plus" to hover the words "Zoom"
"fa fa-th full-screen jgallery-btn jgallery-btn-small" to hover the words "See all Photos"
"fa fa-list-ul change-album jgallery-btn jgallery-btn-small" to hover the words "See Other Projects"
My client is concerned that users wont understand what the icons mean even though I have explained to him that these are standard icons meant to be universally understood.
I know adding text defeats the true purpose of the icons but if its a simple adding it would help.
Thank you.
PS. The zoom feature works wonders. Keep up the good work.
I have a jgallery embedded on a bootstrap popup. First image has some width settings issue and it looks ugly and small. Check the bug in this link, http://s2.postimg.org/ur45orbll/bug_report.png
It would be good if you can reply at the earliest as we are heading to production soon.
Thank you!
Hi,
We are using a IE 8 browser where we could not use this jgallery. Is there any plugin or any other option to get use of this gallery functions in IE 8, 9, 10 ,11 browsers.
i want to remove this ...
if i success in removing this it will be very helpfull for me , it s awesome slider or effect for gallery
Is there a way to easily append the gallery to a internal element so that it renders within the page flow? I've tried going through the jquery and adjusting the append meathods but it is feeling really hacky and awkward. Was hoping there was an easier way of setting this option.
Thanks!
Graeme
When the gallery loads, It isn't the first image that appears, then the first image appears with a changing animation. It there any way to show the first image after load without any animation?
Is there a way to make different animation when i step forward or back? It's a little annoying to see the slide animation from left to right, either i step forward or back.
Thanks!
Video support based on
Hi,
i want to use in mobile "full screen" mode and in the desktop "standard" mode.
how can i do it?
Thanks
Setting canClose to true gives this error:
TypeError: f.fn.jGalleryOptions[this.intId] is undefined
file:///Volumes/jgallery-master/js/jgallery.min.js
Line 9
Hi, how to make a slider fixated, that is when I'm on the last slide switch on the 1st?
It would be helpful for styling some page elements only when jgallery is in full screen mode. For example to hide sticky header that may overlap jgallery view.
Each thumbnail should be square
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.