Hello !
First of all, thank you very much for this wonderful plugin ! It is exactly what i had been looking for such a long time !

I have an ajaxed page that is based on haschange. I use the delegate method on click like this :

$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {

The problem is when i click on a thumbnail or navigation arrows on the slider, the console gives me the following error :

Uncaught Error: Syntax error, unrecognized expression: [href*=/wp-admin/]    in jquery-1.7.1.min.js:18

The animations continue to run but i am afraid that it breaks other parts of my code. Do you have an idea about the origin of the issue ? And how to eventually fix it ?

Also, is it possible to disable easing, and replace it with another animation method ? Maybe CSS like animate.css (http://daneden.me/animate/)

Best regards !

Example: http://jsfiddle.net/qCgcR/2/

This affects both pie and bar loaders. They get rendered on top of one another.

When the first photo of the gallery is a higher (portrait) photo then the rest, the thumbnail row at the the bottom doubles in height and the thumbnails are divided over 2 rows (always, independent of the amount of photos).
If the first photo is a normal landscape photo and a second of further on photo is portrait, this problem does not occur.

Thank you for your slider
I intend to put a link to your website, as a thank you!
Continue improving its performance and design (the design is lovely just perfect so simple)

I want to disable pause slider cursor how can I disable?

Hello, This is amazing slider ever.

I have a question about end method that stops everything when finished all slides completed.
I don't want to loop again all slides. Those need to show once a web page load.

Is there easy way to do that? Or is this option exists already?

Thank you for your good work

i tried this slider on my website, but in opera mini it doesn't work properly.
automatic sliding won't work, i knew that.
but fullscreen image scale doesn't work.

Plz have a look at http://themedemo.indonez.com/Hyperion/

How can we give effect like above sample slider.

e.g. we need to give main image as a background and add another image which may slides from bottom(in some slides there may be caption which needs to be in center left/right)

As you might understand I am not a jQuery Ninja ;) so need your help.

hello how to stop sliding effect if only one item in slideshow
thanks

Images need ALT tags for accessibility and screen readers

Why does it have to request the same image over by using a different URI query? The slideshow cause too many calls to the server because of this.

I'm using 1.8.0 and when the page loads, the camera camera_prev next and controls show up automatically and only if you hover over the image will they go away and behave normally. This is with the basic.htm file using latest jquery.

Also, the the camera page navigation circles show the triangle of the hover of the thumb and only if you hover do they go away.

Camera_pag list items are positioned vertically instead of horizontally in IE9.

Hi, wanted to let you know that I'm integrating Camera as a Featured Content Slider into a CMS Project that I'm working on. As I was adding control in my Administration Control Panel to allow clients to make changes to the settings of Camera I noticed that there's no control options to change the Opacity, Colour or Position of the controls, other than the theme colours, and it would be nice to also change the same with the pagination. It would also be nice to set the size of the thumbnails. Is there any plans to add any of these. I would fork the project, and add them myself, but I'm too lazy, and thought maybe you were looking at adding these functions anyway.

I've been testing the project "Camera" for more than 2 days. I wrote the project as plugin to included in my CMS "phpwcms". Also I've written a content part template with file "camera.js" - all very nornal.
At the start of the website nothing works.But no error messages is visible .
All pictures and thumbnails are rendered. The HTML code is error-free rendered. The code corresponds to the project specifications.

BUT:
Firebug discovered a JScript error at line 136 (Camera.js) or line 4, column 25147th
I have the files on GitHub and also directly tested by the demo site - with the same result.

FireBug informations

CAMERA.JS

CAMERA.MIN.JS

I use for my projekt the newest jQuery.js!

In IE 7 I'm having a problem with slider.

Message: 'left' - is null или or is not an object.
String: 993
Symbol: 6
Code: 0
URI: http://www.pixedelic.com/plugins/camera/development/camera_1.0.6/scripts/camera.js

What could it be?

When I set "portrait: true" in Internet Explorer, the images no longer display. It works fine in Firefox, Safari, and Chrome.

Here is the code I am using to generate the gallery:

jQuery(function(){
jQuery('#camera-gallery-455020').camera({
fx: 'curtainTopLeft',
transPeriod: 2000,
time: 20000,
height: '50%',
navigation: false,
playPause: false,
pagination: false,
loader: 'pie',
pauseOnClick: true,
imagePath: '/amherst-d7/sites/all/libraries/camera/images/',
portrait: true,
thumbnails: false
});
});

I made one little change to camera.js to add alt tags, but otherwise it is unchanged.

hi, sorry for my bad English.
thanks for your great plugin
i use it in a right to left page but it not work properly.
i use this solution to fix that:
.camera_wrap {
display: none;
float: left;
position: relative;
z-index: 0;
direction: ltr
}
.cameraContent {
bottom: 0;
display: none;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
direction: rtl
}

I've play a little bit with your plugin, and I found i great!
I'd little to ask you if there is an option to have the thumbnails aligned vertically on left/side of the slideshow ? I don't find it.
Thanks for help.

Hi pixedelic! thanks for such a great slider.

I implemented your slider in my web page. What size should the images be for slides and thumbs, because I have been trying to change them and everything goes out of it's place specially in mobile version.

Here is my web pages in case you want to see it :)
http://bit.ly/1cMGrp2

Thanks
Carlos

I have been having lots of trouble with only 1 to 3 thumbnails loading in IE9 on the first load, it seemed to be a problem with the UL width being miscalculated when they load slowly and only allowing a small amount of thumbnails to fit. It is on a responsive site which has widths set to 100%.

When they load slowly blank container boxes load before the actual thumbnails which are alot narrower and I have a feeling the UL width is recording these rather than the specified thumbnail size. So that when the images finally load only a few will fit the space. In FF and other browser there are no issues. When refreshing the page in IE they all load.

Hi, there si a way to put numbers in pagination instead the gray circles?
I'm looking for this whitout modify the camera.css, maybe there is a option in the javascript.
Thanks.

Hey, maintainer(s) of pixedelic/Camera!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library pixedelic/Camera is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "pixedelic/Camera",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I'm using Camera (pretty cool, btw!) filled with data from a database. Sometimes there is only one image to be shown. But whenever there is only one image, the caption is not shown though defined. It simply does not slide in.

The pause period makes a delay after resume. The delay period depends on how long the camera was paused. E.e. if paused for a half of minute the delay is about 5 sec. If paused for a couple of minutes the delay is about 10 seconds and so on. If paused for an hour the delay is several minutes.

The issue doesn't depend on browser. I have it in e.g. Chrome 40.0.2214.111.

variable imgFake not found
Clicking slide arrows produces the error listed in the subject.
The error only occurs in Safari 10.0.1 macOS Sierra

.camera_thumbs_cont ul li > img {
border-color: 1px solid #000;
}

not much of an issue, just wanted to point out :)

Am I imagining it or onStartTransitionis not implemented?(;

Otherwise a crazyload of good work.

Hey there,

I'm just trying out your great plugin for my own website. I use the scripts etc. provided in the examples.
When calling the camera() function with the imagePath option, it doesn't respect my new imagePath.
Instead, it tries the standard path, and I see the following error in my javascript console:

GET file:///XXX/images/camera_skins.png  jquery.min.js:4
f.cssHooks.(anonymous function).get jquery.min.js:4
f.extend.css jquery.min.js:4
f.fn.(anonymous function) jquery.min.js:4
$.fn.camera camera.js:350
(anonymous function) figuren.html:17
n jquery.min.js:2
o.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B jquery.min.js:2


GET file:///XXX/images/camera-loader.gif  jquery.min.js:4
f.cssHooks.(anonymous function).get jquery.min.js:4
f.extend.css jquery.min.js:4
f.fn.(anonymous function) jquery.min.js:4
$.fn.camera camera.js:350
(anonymous function) figuren.html:17
n jquery.min.js:2
o.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B jquery.min.js:2

The correct imagePath would be:

 file:///XXX/static/images/camera-loader.gif

I'm using this imagePath option:

imagePath: '/static/images/'

thx for your help :)

I'm showing some images generated by a script, which have an URL like image.php?file=foo.jpg

These paths get extended by a unique timestamp - but it is not checked if the URL already contains GET parameters and appends it just with ?23423422 for example (line 1096 in camera.js). This results in broken URLs that won't load at all (at least here in Google Chrome):

image.php?file=foo.jpg?23423424

Besides that being a bug, I'm not quite sure if it's necessary to append a unique timestamp for caching purposes. I think this should be done either via .htaccess or be appended by the user that's defining the image paths. In my case I explicitly want the images to be cached and therefore have to remove it in the code. It should be a config option at least if you want to stick to it ;-)

It would be good to know which is the slide currently being viewed.

Which also reminds me: the onStartTransition is call for every slice of image created by the transition. What would be nice, is to know is when the animation starts and when it stops.

Hello, i found a problem working with thumb images that has diferent widths.
The width of UL in thumbs content is wrong. Is calculating this $('ul > li', thumbs).length * $('ul > li', thumbs).outerWidth() AND for me has to add the width of each image. in line: 988 and 994

var ulTW = 0;
$('ul > li', thumbs).each(function(){
ulTW += $(this).outerWidth();
});

regards :)

Its not a bug but a feature to be introduced.

Requirements:

1. fx:'scrollLeft,scrollRight' OR fx: 'scrollTop,scrollBottom' required to use sliding left and right but in a sequence

for Example:
When left nav button is clicked it should use transition 'scrollRight'
When right nav button is clicked it should use transition 'scrollLeft'
When top nav button is clicked it should use transition 'scrollBottom'
When bottom nav button is clicked it should use transition 'scrollTop'

I don't know why I have this error.

TypeError: a.attrFn is undefined
...sPropagationStopped()){b.stopPropagation()}if(d.isImmediatePropagationStopped())...

<script type="text/javascript" src="/static/js/libs/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/static/js/libs/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="/static/js/libs/camera.min.js"></script>

Hello ! I try to user the plugin on IE9 (with IE7 mode activated), and nothing appear ! But i found this :

onStartTransition : function() { }, at line 94

Note the last ','. Once you remove it, the plugin works fine one IE7, thanks !

Hello @pixedelic

I am a member of cdnjs project.
We want to host this library on CDN.
Could you please adding git tags for this repo?

Git tag can help us to know your release version.
And, we could auto-update the library by a new tag.

Thanks for your help!

cdnjs/cdnjs#8170

Example: http://jsfiddle.net/qCgcR/7/
Video: http://youtu.be/nAWMlPkTAPo

If the gallery is initially hidden, the slides and transitions get broken.

• If the gallery is shown after the first transition ends, all the remaining slides and transitions are broken.
• If it's shown before the first transition starts or ends, current slide and transitions are broken but the rest get corrected.

Tested in Firefox and Chrome.

I am trying to use Camera plugin in my Meteor JS app but I am getting error:

camera.js:2114 Uncaught ReferenceError: imgFake is not defined

any thought what I could be missing here? Thanks

Please Add Bower or NPM

Hello,

It's not able to work with Latest version of JQuery eg: - jquery-1.11.0.min Or so....
Please make compatible with all the latest version asap.

Will wait for this feature.

I'd love to have more flexibility as far as where I position the nav controls such as below the slideshow or on the sides, just outside of the image slides, centering the play/pause button, etc.

UPDATE: I adjusted the css and resolved this.
Thank you
Lisa

Is there a way to solve this?

Not really an issue in the traditional sense but I think this is something that needs to be addressed. Currently Camera does not include a license with the project. Everything I've read seems to suggest that I can use it rather freely but I think it should be specified as such.

Hi
I'm trying to set up a slide show with same pic and a Vimeo video
I would like video starts automatically without the fake img plus click and I would like that the slide show resume and goes in loop after the video is finished
is this possibile?
Thank you in advance, regards

When you mouse in and and out of the slider rapidly with navHover = true, and then stay moused out, the controls fade animation plays however many times you moused over the slider, regardless of where your mouse is. The animation just plays as soon as you mouse in, and it ignores where the mouse goes after that.

Hi,
let me say that you've managed to put up a great (and my favourite) js slideshow AND
<!-- ~bad things here -->
that I've got into troubles for trying to make it work with WordPress 3.5.1.
<!-- ~end bad things here -->

Don't know if you have scheduled a reissue of the plugin for the latest releases of WP (which I - and many others - would greatly appreciate)... in any case... surely I have NOT solved it fully (just kind of hacked it), but maybe this could help you.

Basically I'm just using the latest version of your js code (downloaded from your site) and have modified the camera_functions.php file to make it load only the needed files (skipping jQuery 1.7.1 and other unneeded scripts for the front-end).

Here's it, let me know if it's of use (https://dl.dropboxusercontent.com/u/32864004/camera-slideshow%20(hacked%20for%20wp%203.5.1).zip)

Cheers,
azrafe7

I get the following error trying to upgrade to JQuery 1.8.3 and JQuery UI 1.9.2 with Camera 1.3.4.

Object doesn't support property or method 'extend'
jquery-ui.js (Line: 567)
Code: 0 (Char: 3)

If I comment out jquery.mobile.customized.min.js library the error goes away. Although I hate to lose the mobile functionality on my site.

I assume I just need to get an updated version of jquery.mobile.customized.min.js, but I'm not sure what to include in it.

Thanks

Shane

Hi,

Could Camera work with canvas tag rather than img tag?
thanks.

See this...

http://bugs.jquery.com/ticket/12232

Setting all of the outerWidth/outerHeight calls to 'true' solves the problem.

var wTh = $('.camera_thumb',this).outerWidth(true),
hTh = $('.camera_thumb',this).outerHeight(true),
wTt = $(this).outerWidth(true);

When I look on my browser on my device, the captions are not formatted at all.

http://temp.bakercomputers.com

Code for slideshow is as follows:

<div class="clear"></div><br>
<script src="{{skin url='js/camera.js'}}" type="text/javascript">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
jQuery(function(){
            jQuery('#camera_wrap').camera({
                alignment: 'topCenter',
                height: '27.34%',
                minHeight: '200px',
                loader : false,
                navigation: true,
                fx: 'simpleFade',
                navigationHover:true,       
                thumbnails: false,
                playPause: false,
                pagination:false,
                portrait: false
            });
        });
// ]]></script>
<div class="fluid_container_wrap">
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{skin url='images/slide-1.jpg'}}">            
<div class="camera_caption fadeFromBottom">FREE DELIVERY in Dauphin, Gilbert Plains, Grandview, Roblin*</div>
</div>
<div data-src="{{skin url='images/slide-2.jpg'}}">
<div class="camera_caption fadeFromBottom">Competitive Pricing, Personalized Service!
</div>
</div>
<div data-src="{{skin url='images/slide-3.jpg'}}">
<div class="camera_caption fadeFromBottom">Locally Owned & Operated in Dauphin, Manitoba
</div>
</div>
</div>
</div>
<div class="clear"></div>

Unsure if user error (me) or bug. Using latest download from website.

When I create a gallery with multiple images, the first image is not responsive and scratches. Is there anything I'm doing wrong?