luwes / js-cover-flow Goto Github PK
View Code? Open in Web Editor NEWA Cover Flow component made for the web
Home Page: https://wesleyluyten.com/projects/js-cover-flow/
A Cover Flow component made for the web
Home Page: https://wesleyluyten.com/projects/js-cover-flow/
I could not find in the docs if it is possible to change the orientation of the coverflow. Is there a way to change orientation so the coverflow scrolls vertically?
Hello, Wesley.
Thank you for your plugin.
I wanted to ask you if it's possible to make coverflow rotate in a cycle.
Like in several other plugins, the first element appears from the same side, after moving the last element. You can see the same behavior here http://fredhq.com/projects/roundabout/.
Hi, is it possible to add some items in a second step?
I'm trying to create a lazy-load-like list..
Thanks for your support!
PS: Awesome component!
For some reason, every time I load an html page that contains my Cover Flow implementation, it defaults to SWF mode, ignoring my ' mode: "html5" ' setting altogether.
After refreshing the page once, then the non-SWF implementation loads and it works, but can't figure out why it's loading the SWF first.
I am using Mac OS X Mountain Lion (latest update), and testing my code with MAMP 2.1.3 with Safari 6.0.4 and the iOS Simulator on the iPad or by using an iPad and accessing the shared site through MAMP and a local network.
I'm struggling with understanding if the issue I'm seeing is an issue with js-cover-flow or an issue with IOS that is causing images to be distorted. I don't have an android device to test with. I've been able to reproduce this issue on IOS 6.1.3 and 7.0. However, an iPad I had running 5.1.1 did not reproduce the issue.
I have a page that will allow a user to take a picture or upload a picture from their iPhone/iPad. Once the picture is uploaded, it will insert the picture into the coverflow.
-- If I take the picture or upload from the device's photo library with an iPhone, the image gets distorted, but the iPhone will display pictures taken with the iPad normally.
-- If I take a picture or upload from the device's photo library with the iPad, the picture does not get distorted, but the iPad will display images taken by the iPhone in the distorted manner.
-- If I upload a picture from my desktop (doesn't matter if it's IE. FF, or Chrome) then the picture is displayed normally. To top it off, pictures taken with the iPhone that display distorted on the iPhone or iPad will display normally in the desktop browser.
Here is what it looks like from a Desktop Browser:
Here is what it looks like from an iPhone or iPad running IOS 6.x and above. The last picture on the right was taken from the iPad.
I'm leaning towards this being an IOS issue, but I don't know enough about how the plugin operates to say for sure.
when moving left and right (dragging on phones) its possible to drag the contents out.
It also makes it impossible to move scrolling right-left without picking up your finger (when it gets to last item).
also possible of doing so in chrome on desktop
thanks
Hi guys and thanks for the great coverflow. I have a question. When using coverflow navi buttons left and right, and coverflow rotatedelay, how do i reset the timer when using the navi. I have a rotatedelay of 5 seconds and when i use the left and right arrows after let's say 3 seconds since last rotation, the coverflow rotates again after 2 seconds. How do i fix this? Thank you!
windows.open blocked by some browsers. Why we use html a tag for the 'link'?
Hi, if possible, please render the coverflow in HTML 5 for IE 9 and 10, bearing in mind all the benefits HTML 5 presents.
IE11 is currently not detected as IE - so it shows the control in html5-mode if not forced into flash-mode.
The html5-mode works somewhat in IE11 but - I guess - the 3D-transforms are still not supported.
Well, I was implementing your plugin and I was struggling with the past images that could not be clicked..
Example: Im in the third image, I click the fourth, it goes to it, however, if I'm now on the fourth and click on the third image, nothing happens..
Workaround: When I set mousewheel option to FALSE, it worked fine.
Info: I'm using chrome Version 30.0.1599.101
Is there such a thing?
I'd like to reduce opacity for every cover except the currently focused one…
While using the library I experienced that the scrolling behaviour is too sensitive on iOS and Android when you want to scroll the images one by one.
It is hard to get to the correct image right away, most times you scroll too much and have to scroll back afterwards.
It would be good if the scrolling sensitivity would be adjustable, as the described behaviour is good when the users need to scroll fast, but not if they need to scroll one by one.
After opening a Shadowbox lighbox within the IE10 the api calls are not working anymore and the console throws the error:
SCRIPT5007: Object expected - coverflow.js, line 1 character 3251
Demo: http://kunden.siteway.de/cf/
Any ideas?
The js-cover-flow widget consumes all scrolling events. This is more of an issue on mobile where the widget spans most of the vertical width of the screen, and the user cannot scroll past the js-cover-flow widget.
coverflow.js
41: cover.domElement.onmousedown = clickHandler;
I am creating an App using the JS Coverflow (http://luwes.co/labs/js-cover-flow/)[App is created for IOS, with Cordova Phonegap], I have creating the implementation using JS in order to make the inline Json array dynamic. Tha gallery value is pullin from a text file in my project that conatins an array of the required information. Functionality wise everything is working wonderfully. My problem is that when I change the artist a few times, and remake the coverflow for each one, after enough have been loaded the app crashed. I think memory is not being released for the images loaded for the previous artists, even though only the current artist's images are showing (max of 15 at a time). Does anyone have a suggestion on how I can manage this memory?
As far as errors, I receive the 'Received memory warning.' error from the MainViewController, and occasionally 'Max open files: 78'
function playlistType(index,num){
$('#coverflowplaylist').html('');
if(gallery==null||gallery=='')alert('null');
var html='';
html+='<script>';
html+=' function reset() {var replacement = document.createElement('div');replacement.id = "container"; var el = document.getElementById('container');el.parentNode.replaceChild(replacement, el);';
html+=' coverflow('container').setup({ item: 1, width: 1024, height:618,backgroundcolor: '000000',gradientcolor: '000000',';
html+=' playlist:[';
var h=1;
for(var i=0;i<gallery.length;i++){//for(var i=0;i<gallery.length;i++){
if(gallery[i].type==index){
if(h>((num-1)*15) && h<(num*15)){
html+='{"image": "../../Documents/'+gallery[i].prettyid+'.jpg", "link":"../../Documents/'+gallery[i].prettyid+'.jpg"}';//Image/Link
if(i!=gallery.length-1){html+=','};
}
h++
}
}
html+='],coverwidth: 600, coverheight: 400,coverdepth:300, coverangle:40, covergap: 100,fixedsize: true,textoffset: 50,x:0,y:0 })';
html+='.on('ready', function() {this.on('focus', function(index) {document.getElementById('focusindex').innerHTML = index;captionReplaceType(''+index+'',''+num+'');});';
html+='this.on('click', function(index, link) {document.getElementById('clickindex').innerHTML = index;console.log(link);});});}reset();</script>';
$('#coverflowplaylist').html(html);
reset();
coverflow().to(3);
}
Is there a way to disable advancing the coverflow when the cursor is over it and the mousewheel or trackpad is used to try and scroll down?
Hello,
Is it possible to disable the hook of keyboards shortcuts like arrows (top and down) and space ?
I can't scroll in my page with the top and down keys of my keyboard when i use your coverflow.
Thanks.
Hi . the 'coverflow-cell' item , if I click it, then focus , but in my iPad2 , I touch it . then not working .
I've only tested this with Firefox 22 and 23, but here's the issue.
when using the Mouse scroll it advances the coverflow 3 steps at a time. In digging into this, it seems that the default setting for Firefox's DOMMouseScroll.detail = 3.
FWIW, here's what I changed to get it to work as expected:
The line in the code:
var e = t.detail ? t.detail * -120 : t.wheelDelta,
can be changed to:
var e = t.detail ? (t.detail / 3) * -120 : t.wheelDelta,
and then the coverflow advances normally one picture at a time.
It would be great, if you allow the setup-param to be a JSON-object instead of an URL to the JSON-file. I have an web-based application, which must work without internet connection, so I cannot pass an URL to the playlist-param.
I'd like to see if it is possible for the SWF failback system to be able to load images that come across as a Base64 encoded string. Basically, similar to a dataURL format: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..."
We are storing our images in a database encoded as a Base64 string. In looking at the source it appears that you are checking for a string or object and if it is a string, you assume it is a regular URL.
The bottom of the covers overlays the content under the coverflow in the last firefox update ver. 23:
http://luwes.co/labs/js-cover-flow/
All I get in IE is:
SCRIPT429: Automation server can't create object
and
SCRIPT445: Object doesn't support this action
It doesn't work on the demo site either.
Any Ideas??
I wanna change dimension of component like responsive layout.I made it like this:
coverflow('player').setup({
playlist: 'playlist.json',
width: $(window).width(),
height: $(window).height(),
coverwidth: 260,
covergap:100
});
$(window).resize(function(){
$("#player").empty();
coverflow('player').setup({
playlist: 'playlist.json',
width: $(window).width(),
height: $(window).height(),
coverwidth: 260,
covergap:100
});
the layout changed nicely but the swiping has no response any more,is it a bug or I do it in a wrong way? Anyone could help?
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.