i have slider in bxSlider, and the item of the slider is draggable using jquery ui.
for better understanding, here is the slider in action http://comicedu.com/htmlcropper/v2/
try to drag the dog in dogs tab to the background (brick) you will see the dog now inside the brick, then move to cats tab, after that click the left arrow then drag the 3rd image and now you will see the draggable is not working, what is wrong with that? i investigate that bxSlider add bx-clone class to the container div.
This is just a guess, but it looks like to me, jquery is attaching the drag and drop events first to the 'true' (not cloned) images, then bxslider is creating the clones AFTER jquery has registered the images for drag and drop, so the cloned images aren't being attached to the drag/drop events?
Try loading things in order.
$(function(){
loadSlider();
loadDragDrop();
};
function loadSlider{
//Load the slider
}
function loadDragDrop(){
//Load the drag/drop
}
OR Attach the drag/drop on page load as you are now, then try re-attaching the drag/drop on this event of the bxslider:
onSlideAfter: function() {},
Hopefully this will force the drag/drop to be added to clones as well since they would have been created by the slider already.
Clones are created to fill in the empty slots in your slider. say your slider can fit 6 images and you have 8 images, 4 clones will be created so when you skip to the second group, the slider is full.
If my guess is way off (and it could be), you can do 2 things to 'quick' fix until a better sloution comes along:
Hide any bx-clone elements with css
.bx-clone { display:none; }
Make sure you have the correct amount of images to fill the slider. For cats, it looks like you have 10 images, the others are clones, so make the number of cat images 16 so the slider doesn't have to create any clones.
Related
I am using the blueImp image gallery in a carousel.
I am allowing images to be dragged for a mobile user, but images can be dragged vertically as well as horizontally, meaning you can get the image half dragged off screen.
As you drag, the .slide element changes inline to dimensions like:
style="transform:translate(-100px, 256px)"
I have tried setting a translateY(0) !important but this just overwrites the dragging altogether.
I am using jQuery, so maybe there is a way of watching the drag event? Any help useful.
the only way I managed to do it was to overwrite blueimp's ontouchmove function. You just need to comment out the translateY call. I took the source from https://github.com/blueimp/Gallery/blob/master/js/blueimp-gallery.js.
Place the whole overwite somewhere in your js, ideally separate file with comment for future.
blueimp.Gallery.prototype.ontouchmove = function (event) {
...
} else {
// Removed move up/down funictionality
//this.translateY(index, this.touchDelta.y + this.positions[index], 0);
}
};
Hope it helps you!
Maybe blueimp can add an option to toggle this behavious in future :)
Pav
How do I change content of image elements similarly to changing content in p (HTML paragraph) elements? (refer to: http://www.w3schools.com/jquery/html_html.asp)
I would like to have a scatter+sort effect button next to a default carousel view of images that when clicked, will, as you might have already guessed, scatter and sort itself in a stationery template.
Also, having the button change when clicked to flip between "Scatter+Sort" and "Carousel" views.
Here is what I have so far:
Carousel view - https://gyazo.com/18e67f7347de3310d155c0b8624b3716
Stationary view - https://imgur.com/a/coreG
What I intend on doing is following a similar approach to Jennifer Dewalt's a project a day for 180 days, except I am doing 100 projects in an indefinite time period.
Update: I got a button to bring up an image, but the container of images (carousel) is still on the page and does not vanish upon button click. Also, the image is shown as not available on the top left of screen before button click.
Update 2: Something I am looking into: https://www.w3schools.com/css/css3_animations.asp . Animation iteration count of 1. I'm thinking maybe, if it's possible, to rewrite the container class (carousel) in css then pulling the code in an html file, so that way I can manipulate the elements within the container.
document.getElementById("myImg").setAttribute("src", "my-new-image-source.jpg");
http://www.w3schools.com/jsref/met_element_setattribute.asp
I have two matrix layout. The first one contains seven images placed like a grid. How can we arrange all the images vertically in the second layout with animation?
-Thanks
If you are able to 1) detect the location of your target matrixlayoutrowcells, 2) to detach the content of the source cell and 3) attach it to the target cell, than it's nothing more than just incorporating some CSS animations ;-)
See this example of a moving sap.ui.commons.Image : http://jsbin.com/jafuk/1/edit
I have downloaded jcarousel slider but I want two rows to appear and on clicking on next or previous both rows should move simultaneously, i do not know the concepts of javascript and jquery so please tell me the steps to be taken.
Thanks in advance
You mean you need 2 sliders. if you click on 1st slider's next / prev arrow, than both carousal should be effected. is that so?
If yes, then you have to try carousal's inbuilt function for customization.
add 2 carousal slider in your code
hide carousal slider arrow for 2nd slider
now do custumization for your 1st slider arrows. i.e. trigger 2nd
slider whenever 1st slider is triggered. you can try to put your
code inside carousal function:
$('.jcarousel').on('jcarousel:scroll', function(event, carousel, target, animate) {
// "this" refers to the root element
// "carousel" is the jCarousel instance
// "target" is the target argument passed to the scroll method
// "animate" is the animate argument passed to the scroll method
// indicating whether jCarousel was requested to do an animation
});
you can find various customized function from here: http://sorgalla.com/jcarousel/docs/reference/events.html
What do you want to show in the second row?
Is it some info of the current image like description or the count e.g. 2 of 7 or one more set of images.
If it is info(description) you can create a div after your jCarousel container and change the content of the div on next and previous button click callback function.
Post some code to get a clear picture
I have created a web page which uses the jQuery Tools' Scrollable component, and the page is based on the minimal setup demo. As in this demo my page also uses scrollable items with room for five thumbnail images, but when my page loads for the first time I want only a single scrollable item containing only three thumbnail images, with the remaining two image slots empty. I assumed that I could simply replace the three scrollable item divs from the demo with a single scrollable item div and everything would look fine, however when I do that I end up seeing inoperable left/previous and right/next icons, even though there are no previous or next scrollable items to scroll to.
I have an example of what I'm trying to do on the jsfiddle site here. It's essentially the above referenced demo with the non-applicable scrollable item divs and child imgs commented out.
How can I initialize the scrollable such that I only have a single scrollable item on the page without having the non-applicable left/previous and right/next icons appear?
Thanks in advance for your help, suggestions, etc.
best I can come up with is
if($(".scrollable .items div").length < 2) $("a.browse").hide();
after the initialization.
I wanted the browse buttons to be hidden by default, then only display them if needed.
In the css, default the a.browse to visibility: hidden
Then in the initialization:
$(".scrollable").scrollable().each( function() {
var scroller = $(this).data("scrollable");
scroller.getNaviButtons().css('visibility', 'visible');
if (scroller.getSize() <= 1) {
scroller.getNaviButtons().addClass('disabled');
}
});
This seems a bit hacky, but avoids temporarily displaying the browse buttons if they are not going to be seen.