Image carrousel with bootstrap - javascript

I am currently working on a display for my images
I try to achieve something like this
I found on bootstrap documentation the Carrousel, it is close but not what I want to achieve.
How could I do this with bootstrap or another ressource without coding it in JS from scratch?
More precisely, how to do the carrousel (with multiple images) below the active image ?
Regards

Check this website and select the one you want.
bootstrap-4-carousel
There is one Carousel indicators with thumbnails which may fit your need.

Related

Google images view mode example

I would like to implement a google images kind of view of images(and other details) on click.
When a image is clicked, additional data expands under it with a arrow pointing to the starting position and when an other image is selected the first one collapses and the other expands. Does something like that exists(open source) or is there only the option to implement it myself?
Screenshot of what I mean:
Thank you
Photoswipe is a great responsive javascript library.
This is a link to an example of Photoswipe.
You can add caption, customize backgrounds very similar to google image search.
Once you click on the photo Photoswipe will let you display your images on your page using standard html, css and javascript. You can add captions as you see below.
Attached Detailed Guide for Photoswipe

Banner slider for wordpress without plugin

I would like to include banner slider that will fit properly on my site http://wwww.virmodrosti.com index page.
I tried to insert some codes I found on the internet but somehow ruined my entire page.
Question 1: Is jQuery or CSS alone is a better choice for slider?
Question 2: Where can I get easy slider without plugin for my wordpress theme?
I need a slider to be just below the line div id="content" on the main index page. I would like to insert an 1188px wide image because my main wrapper width is 1180px. All I want is a simple slider that has option for aorund 5 posts, that will be manually setup. That's why I ask for a good PHP or HTML code that will work with my wordpress theme.
.
Can you show me a Demo, what kind of slider you want. you can use slider Revolution For a simple slider.
This is a really good basic slider. http://kenwheeler.github.io/slick/
However, if you don't know how to develop your own plugin, then you are going to struggle to figure out how to control the content of the slider. Also if you are using someone elses code, isn't that just the same as using a plugin? Using a plugin means the code will be regularly updated, whereas if you use someone elses static code, then if it breaks you won't know what to do.

Incorrect work jquery plugins bxslider with plugin elevatezoom

I'm begginer in programing. I'm trying to use jquery plugins elevatezoom and bxslider. And I have a little problem.
What I have
When I choose one picture from the box, which was created by bxslider plugin, as I understand, the other became invisible, but still exist at the page (in my example at the left top of the page). And when I mouseover this block, the elevate zoomer plugin understand it as a picture for zooming, and start to zoom it. As a result,the page works incorrectly.
Does anyone know how to solve this problem?
I also can give the link to the live project
Maybe you could try to add a class to the active slide object like here and then create an if statement for active slide objects only.

new to javascript- image gallery- thumbnails expand to full size when selected

work in progress- live site
I have a gallery page with several sub-pages. Each sub-page has a row of thumbnails on the left. When one of the thumbnails is selected, it will show larger on the right. This is a Wordpress site, but I've been told that JS might be the best route to take. I'm fairly inexperienced with JS, so I'm unsure of how to go about this.
How do I go about showing the thumbnails and the selected image?
There are lots of jQuery (jQuery is very powerful!!) gallery plugins can do what you need. Check out this awesome site awesome jQuery tutorials, there are many detailed tutorials about how to build inspiring image gallery.
Except JS/jQuery, you also need to know how to use Html && CSS.
The basic idea is show/hide(static or load by ajax dynamically) your big image when hover() your thumbnails.

javascript image slideshow (jquery or YUI)

I am looking for a javascript based image slideshow solution. Requirements I received:
A few images are added to the slideshow, and it fades one image after another and then starts again from the first image
There should be a navigation in order to manually go to the next / previous image
There should be the option to pause the slideshow and continue again
Can the jquery cycle plugin handle these? Are there any alternatives for the YUI 2 framework?
Jquery Cycle plugin can definiately handle this. Check out this page of examples for more details.
For YUI 3:
http://freshcutsd.com/yui-slideshow/
-Eric
The YUI Carousel component seems like a good fit:
http://developer.yahoo.com/yui/examples/carousel/csl_circular_source.html
Take a look at the great Lightbox Clones Matrix. It's mainly based around ones which open in a div above your content, but many offer slideshow capabilities. Just use the checkboxes in the top right to filter to what you want.

Categories