Here is the jCarousel lite page : [URL] And here is my project : [URL] Carousel pager works great, when you click a page, carousel switch to the chosen page. But if you try to drag an item outside the carousel (green border), the item won't go above the carousel border, but underneath.
View 4 RepliesI've got an infinite jQuery carousel, which is working, however I need to make a couple of tweaks and I don't know where to start. Below is the code for a visually simplified, but technically identical version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<script src="[URL]" type="text/javascript"></script>
<script type="text/javascript">
$.fn.infiniteCarousel = function () {
function repeat(str, num) {
return new Array( num + 1 ).join( str );
} .....
Basically, I'm trying to achieve two things:
1. The script creates empty carousel items; these are visible in yellow when you scroll through the items by clicking on the blue squares. How can I remove these so that item '6' goes straight back to item '1', without the two empty list items in between?
2. At the moment two clicks allow you to see all 6 'real' squares, plus the two empty yellow ones. How can I make it so that it scrolls one list item at a time, rather than 4 at present?
I'm wondering if there's a way to have multiple row carousel implemented.
I use jCarouselLite.. [url]
To be more specific, here's what I have:
And this is what I would like to accomplish:
I do realize that placing multiple items withing the <li></li> would be one approach, however I can't do that since the items are generated dynamically. The structure of my data (items) is an unordered list:
Using "float: left" & "clear: left" messes up the whole structure...
Any ideas how to display 9 items at a time on 2 rows?
I'm trying to get drag and drop script working from this tutorial: [URL]. I want to drag items between columns (DIV's).
Here is my code:
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
document.onmousedown = mouseDown;
window.onload = function(){
// Create our helper object that will show the item while dragging
dragHelper = document.createElement('DIV');
dragHelper.style.cssText = 'position:absolute;display:none;';
CreateDragContainer(
document.getElementById('DragContainer1'),
document.getElementById('DragContainer2'),
document.getElementById('DragContainer3')
);
document.body.appendChild(dragHelper);
} .....
Every top level item in these containers should be draggable. Do this by setting the DragObj attribute on each item and then later checking this attribute in the mouseMove function
for(var j=0; j<cObj.childNodes.length; j++){
// Firefox puts in lots of #text nodes...skip these
if(cObj.childNodes[j].nodeName=='#text') continue;
cObj.childNodes[j].setAttribute('DragObj', cDrag);
}}}
This script is working only particularly: [URL]
version of Apycom's jQuery menu; you can find itat http://apycom.com/ and it is looking really good.I have uploaded files, and published it on a test site - www.flexin.beUnfortunately, some of the submenus starting from the second that haschildren elements, it adds the item on the top level in InternetExplorer.Does anyone on this list has any experience with this library?
View 2 Replies View RelatedI'm planning on making a website which is mainly just a gallery of images.
The site will essentially look like one page with a jCarousel on it, when the user clicks left or right on the carousel, I would like the URL to change but for the animation not to get interupted.
I would also need to change some HTML on the page too, essentially each image will have a Facebook 'like' button and that will need to change to the corresponding URL.
The carousel is going to be database driven and dynamically built up with potentially 1000's of images, so I'm not sure what the best technique for this would be? I'm building it in ASP.NET / Ajax and using the SlideJS carousel [code]...
I don't have a ton of experience with JQuery, but I'm trying to design a carousel using Agile Carousel, the plugin. I've copied the code correctly, but nothing shows up. My code is as follows:
[Code]...
Anyone know a jquery plugin I can use for a horizontal scrolling image carousel with different size images. I Iike the plug in here as my client will be easily able to put new content using a simple text file. The problem is that the images will be the same height but different width so I get ugly spaces between narrow images. Is there a plug in that solves this or is there a way to manipulate the css for each image so as to adapt the width of the div ? I can add the height and width properties of the images themselves to the text file and that works up to a point , but the images display at their correct size but the carousel stops working.
View 1 Replies View RelatedI'm trying to create a horizontal carousel/slider that will display my latest Tweet.
I started with some code I found to pull in my latest tweets via .json. I got that all set up and now I'm trying to integrate the bxSlider plugin to cycle through these tweets one at a time.
At this point I get all the tweets in a <li> that cycle through together. I've set up a jsfiddle to demonstrate what I have
[URL]
I have the cycle plugin running happily along on a website, but I really need to be able to sometimes add a thumbnail carousel at the bottom of the slideshow a bit like the one in galleria classic (here). Does anyone know of a good solution or am I better off looking for something else?Galleria doesn't work in ie6 apparently and also I'm quite happy with everything else about cycle.(edit - the advanced pager demo on the cycle site isn't really shiny enough, by the way. It doesn't scroll or change with the gallery)
View 2 Replies View Related[URL]This is my website and you can see the images in the header are messed upbecause I tried to use "jcarousel" but it is not working and I have to sort this out
View 3 Replies View RelatedI am trying to set up a jQuery carousel on my home page. I want it to operate by mouse - also auto scrolling, be horizontal, be circular, show one image at once.
I currently have three images to show one at a time in a containing div. All three images are showing together. One is in the container, in the right place, two others are shown below it. These two should be hidden in the carousel. The carousel itself, does not work. code...
following a tutorial, i've done this jquery infinite carousel
[URL]
Carousel start scrolling only when u click on the left or on the right side of it.
How can I make the carousel to scroll automatically when page loads?
I find that either of these plugins work in isolation but together they are clashing. The first to be specified in my initialisation code works, the following doesn't. Initialisation code looks like this:
// remap jQuery to $
// jQuery.noConflict();
(function($){
// Infinite Carousel
$('#carousel').infiniteCarousel({
'transitionSpeed' : 2000,
'displayTime' : 10000,
'textholderHeight' : .25,
'displayProgressBar' : 0
});
// Lightbox
$("a.lightbox").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'titleShow' : false
});
})(this.jQuery);
Web pages:
Carousel working: [URL]
Fancybox not working: [URL]
[URL]
I'm currently having difficulty to debug this issue in ie7. When the page is loading, all carousel lists are exposed and content displays for a couple of seconds.
what I want to learn to do is have a feature on my website: [URL] where under the portfolio section there are multiple links (product, packaging, identity etc) I want different carousels to show up on the .index page when you click a certain one of those links. In old school HTML I believe you would use a frame but I know there is a better way to do it using jQuery. [URL](work section) does exactly how I want it to be except I don't need the fancybox feature.
View 1 Replies View RelatedAdobe forums suggested a jquery solution. I want to continuously rotate my customer testimonials without requiring users to click to advance. I have successfully implemented rotating text, but am having problems including the image too.
On this page, the words "cash register" is actually the "alt=" for the image, but no image displays.[URL]..
[Code]...
I'm using jMyCarousel [URL] for a 100% width horizontal infinite thumbnail scroller, but can't figure out how to add one last piece of functionality. Here is the feature in its current stage of development: [URL]. I've got the hover-to-pause part working (clunkily in terms of backend but it works), but now I need the house image to start centered on the page and pause there for two seconds, and then automatically slide with easing effects to center the next image for two seconds, and so on, rather than have one long continuous scroll. I'm very new to JQuery and if this project wasn't deadlining in a few days, I'd totally study a JQuery slider to see how they do the thing I need and try to adapt it for this carousel, but I'm afraid it's out of my league right now.
View 1 Replies View RelatedIts a long shot posting here but the task I'm using a jQuery Carousel that has a youTube video embedded on one of the slides:
[URL]
I have is does any one know a way that when the user clicks a new slide the youTube video pauses, turns off, or at the very least the volume of the video is set equal to zero.
I dedicated some time creating my own carousel with images, and got a little problem:
It works perfectly when I´m on the website, but when I change between the tabs on firefox/chrome, it seems that the function make some kind of queue, and when I come back to the website, it execute the function a lot of times at the same times, passing between the images in less than half second (I configured to change every 5 seconds).
function circCar (car) {
Here is the code, and if anybody wants to see the problem, open this url, open another tab (blank or another website) and stay on it about 15 seconds, when you come back to my site, you will see the queued function. [url]
I want to display three sets of images on a Web page, and I want to use only one jcarousel to do it. I want to change the list of images based on the user clicking on one of three links, each representing a set of images. How do I do this? I know I can edit the DOM to modify the list of items, but how do I call jcarousel's reload() function? I thought of using three instances of jcarousel, but that takes up too much screen space and requires the user to scroll too much.
View 1 Replies View RelatedI'm building a gallery page, that's setup like this:
- carousel based horizontal image thumbnail navigation.
- main div that loads, on thumbnail click, a high res version of each thumbnail image that exists within the carousel nav.
[Code]..
I'm using the jQuery Carousel plug-in found here [url]
I am using it in conjunction with Wordpress. It is working how it is suppose to but there is still a glitch.
This problem doesn't happen every time but more often then not it does. When the page first loads the items in the jQuery wrap show as a straight list over all other content.
You can see this happening here. *if it doesn't happen right away, visit a few of the pages and you'll see it. [url]
The question I have is, "Am I doing something wrong with the jQuery code? Should I be pre-loading all of these before they appear on the page? Is there something I can do differently?
i'm New to JQuery and I recently had a problem with encorporating a transition at the beginning and end of my carousel. I found that by default it would Fast Forward/Fast Rewind through all the images at the ends, rather than just jump to the slide and wrap.
I've managed to solve the issue (bar a transition effect from the last slide back to the first) it now jumps to slide one, rather than rewinding through all the images. However (and i know this sounds silly) but i'm having trouble doing the reverse. I'll add both the zip file to show a working model if interested and also post the 2 relevant functions :)
[Code]...
I'm working on modifying a jQuery plugin that makes an image carousel. I like how it is not with one exception... I'd like the images to overlap one another. So the main image that is displayed will overlap the ones on either side of it somewhat.
You can view the source of the demo I posted to look at the JS for it... I used the "moving boxes" plugin and already modified it a lot.
how to overlap images using CSS?
I have an ASP.net page where I load a record set server side and upload it into a listbox. I'm trying to do all the movement functionalities of the listbox items client side. Specifically, I'm trying to figure out how to copy selected listbox items from one listbox to another -- on button click. I've searched for a while, but every example that I found moves the actual item into another listbox, I just want to copy the selected item to another listbox.
View 6 Replies View Related