I'm trying to create a slideshow using jQuery (similar to jquery scrollhorz) but I want the previous and next image partly shown.
Right now, what I have, is a div (with overflow hidden) containing all the images I have. When previous or next button is pressed, I animate the whole div either to left or right. The problem is, if I have many images loaded into the div, it becomes laggy and slow.
What is the best design to implement this image slider?
Without going into the code required, my suggestion would be to use jquery (or moo if that's your thing) to maintain a div that is three to five images long, and keep a list of urls to all the images you want displayed. When you slide the images left or right, you'll pop off the image on the opposite end and add the appropriate image to the other side.
You could use the same technique to loop through the list seamlessly.
Try this.
Hero carousel
It fits your description....Hope it helps out :)
this might be a solution too.
http://jsfiddle.net/JCQ6Q/15/
Vote up if it helps you :) all the best
Related
I almost have no experience with JAVASCRIPT, so I've searched a lot for a carousel with right & left arrows & lightbox (fancybox). & finally I found it ... but when I click left or right arrow , the all images row slide left or right. I need it to slide normally one image by one. How can I modify that, please ?
Here is an image describe how the carousel look
I already done with copying the carousel to my website, but the only issue is that the all images row slide left & right ... so when the user click left, the current four images got replaced with the next four images.
it's hard to write all needed codes here, I think the others Javascript files make effect on the final result. So, I attached all the needed files.Website's Files
First, I recommend you practice implementing the carousel following this instruction (be sure that you incorporate Bootstrap 4 accordingly).
https://v4-alpha.getbootstrap.com/components/carousel/#with-controls
My experience with carousel is that you would have to nest <div> deep in each image to control their placement and sliding. I had to create container per image for my carousel, so that was at least three levels deep. If you only use images alone per slide, you may be able to just use div containers alone.
Now, if you are using LightBox framework as well, then there are likely to be conflicting javascript functions. My suggestion is that if you really want the carousel, to just use images alone, and then style it accordingly by CSS scripts and not use the Lightbox. Otherwise, it is going deep in javascript and make custom adjustments.
https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
se angle brackets to force linking: Have you seen https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
enter code here
I'm adapting my code from the example
nearby-image-partial-visible-slider.source.html
It's working good except only one of my requirements is not met.
My images are ordered, so for the first image, I don't want there to be another image on the left of it (in the example it's the last image), and user shouldn't be able to swipe left any more if it's showing the first image. And the same for the last image, no image should be partially shown on the right. Is there an option to turn on/off the loop slideshow? If not, how may I achieve that?
Please set $Loop option to 0.
Reference: http://www.jssor.com/development/reference-options.html
I am currently working on an app with a friend and we need to make it so that an image will fall when the image below it disappears. So it needs to like take the images place when it disappears. Any ideas on how to do this?
jQuery would be a good starting point for this. Presumably you're hiding the image with JavaScript to begin with, so add code to the same function that loops through all of the images above it and moves them down to fill the gap (possibly using .animate()).
Are you sure you want to move the images down, though? That will leave an odd blank space at the top of the screen, where there's no image left to fall from above. Images "falling" upwards when the image above them vanishes would make more sense on most HTML pages.
I need to make a dynamic jQuery menu for showing products.
There will be one main picture with text and hyperlink on it, taking 60% of the screen, and on the right of it I need three small pictures (one above the other, horizontally) with 20% width of screen (but all together taking same height as the main one).
I need help for the animation. The animation will be next:
the three pictures on the right are sliding up, and the top most disappears, and a new one is appended to the bottom (at the same time as the top most is disapearing). Now, the one that dissapeared becomes the main one.
I've made an easy solution with .slideUp function, but that doesn't actually made the div go up, instead it is just losing it's height until it becomes invisible. It is not the solution I wanted.
Thanks.
EDIT:
I've managed to get some solution with jQuery.sliedUp function, but still I didn't get the effect that the client was asking for.
Now with a little bit more search, I've found that the jQuery UI hide function extension can do the effect I am looking for.
Here's an example: http://jsfiddle.net/WMPRJ/
My problem now is if you click on the top div, while it is sliding up, the bottom div does not follow it up and take its place. I need to do that. Please provide me with a solution.
Append the current main to the bottom of your thumbnails, slide up the top one and remove() it. Take its src attribute and set it to the main image.
Here's some (sorry, not a self-contained example) code that should get you where you're going. If you actually take the time to read it you'll see it does exactly what I described in the first two sentences.
$('.thumb').first().slideUp(function(){
$('#main').attr('src', $(this).attr('src'));
$(this).remove();
});
if this a homework please append homework tag.
I can't provide you with full HTML and javascript, but an idea. You have two blocks. Float the right block;
Left Block - 60%.
Right Block - 20% (float:right)
Define height for Right & Left block and give overflow:hidden for Right Block.
Now define a click function like this.
var nextAnimateImageId = 1;
$("#my_button").click(function{
jQuery("#my_image"+animateImageId).animate({height:'toggle'});
nextAnimateImageId = nextAnimateImageId + 1;
});
My idea is, if you have 5 images, only 3 will be shown becaue of defined height and overflow:hidden property. When you animate the first image to height=0 (which is what toggle does), the 4th image will come up due to the space freed up, giving you a nice scroll up animation.
I am in the process of building a photo gallery - a simple one which has a div with the large-sized image, and a div below this to have say 5 thumbnail images. This lower div would then have a left and right arrow images appropriately placed, which upon clicking will offset the thumbnail container and bring in the next 5 thumbnails. And ofcourse, on clicking the thumbnail, the large image in the div above would also change to reflect the correct image.
I know this is simple, and better galleries can be built using libraries like jquery etc.. but I am in the process of learning Javascript, and want to learn it the hardway instead of using those excellent libraries right away.
I am facing issues in developing the "offsetting" part. How do i keep a track of the first and last thumbnails contained in the thumbnail container, so that the left and right arrow keys can offset and bring the thumbnails appropriately?
Also, please guide me to any resources that let me develop such thumbnail based galleries without using any libraries like jquery. I do not want any fancy effects/ slideshow stuff, just a simple elegant static gallery would do.
Thanks!
You can use element.firstChild and element.lastChild to find the first and last child (thumbnail) inside your div.