Develop Reference

How to display first image of gallery?

I have a container of images populated when the page is requested with the images available in a certain directory (so number of images is variable) using the Thymeleaf rendering framework:
<div id="lightgallery">
<a th:each="i : ${content.images}}"><img th:src="i"></a>
</div>
When doing that all images are displayed on the page below each other (while I would like to only display the first image as a place holder). When I click on one of them, the light gallery opens with the images as thumbnails.
I would like to now hide all images except the first one, which will be the place holder for the gallery. Clicking it will then open the gallery, where the placeholder image becomes the first image of the gallery. Kind of like such:
<div id="lightgallery">
<a><img src="first.png"></a>
<a th:each="img, i : ${content.images}}" th:if="${i > 0}"><img th:src="i"></a>
</div>

You can make it cleaner by rendering the first image together with the loop. Consider declaring a CSS class 'hidden' for display: none and use the it for second images onwards
<div id="lightgallery">
<a th:each="image, iter : ${content.images}" th:class="${!iter.first} ? hidden">
<img th:src="${image}">
</a>
</div>

You can use the property ${i.first} to tell if it's the first image. Here is how I would do it:
<div id="lightgallery">
<a th:href="${content.images[0]}"><img th:src="${content.images[0]}" /></a>
<a th:href="${image}"
style="display: none;"
th:each="image, i: ${content.images}"
th:unless="${i.first}"><img th:src="${image}" /></a>
</div>

How can I make javascript change main div depending on what thumbnail is clicked?

I have the following items laid out in static blocks:
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-1 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-2 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-3 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-4 current-slider"></div>
</div>
Along with a thumbnail navigation block below:
<div class="image-compare-nav owl-carousel owl-theme">
<div class="owl-wrapper">
<div class="owl-item">
</div>
<div class="owl-item">
</div>
<div class="owl-item">
</div>
<div class="owl-item">
</div>
</div>
</div>
At the moment, all of the main twentytwenty blocks appear underneath each other, but what I want to happen is that only the first one is displayed, and whena thumbnail is clicked, the relating slider div, is shown in it's place.
It's important that as each thumbnail is clicked, the slider changes from the old one, to the new one.
So far I've got this http://jsfiddle.net/96rq4vet/2/ but, when the thumbnails are clicked, the new div isn't showing up, they're staying hidden.
What am I doing wrong?
UPDATE
I'm getting closer with this fiddle: http://jsfiddle.net/96rq4vet/3/ however, I can't get only the first main div to show at first. I tried adding style:display:none; to the second-fourth one, but that doesn't make them show when the thumbnails are clicked.
Any ideas?

Rather than using classes you could use data attributes. You can then grab the data attribute of the thumb that is clicked in order to associate it with the data attribute of the image you want to display.
Something like this:
<div class="twentytwenty-container" data-image-num="1">
<img />
</div>
<div class="imageSet" data-image-num="1">
<img />
</div>
$('.imageSet').click(function() {
var imageNum = $(this).attr('data-image-num');
$('.twentytwenty-container[data-image-num="' + imageNum + '"]').show();
});
JSFiddle

HTML image vertical align

I'm using HTML, CSS and Jquery and I did a image hover effect with the watch image and I want to be able to add the same image and effect with multiple images vertically down the center of the page but it wont let me, here's the site in question! any help would be great!
<div id="header">
<h1></h1>
</div>
<div class="center12">
<img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
<h2>
Home / Styles & Sizes /
Brands & Prices /
Watch Straps / Tips on buying used
</h2>
</div>
<div class="fadehover">
<img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>
It seems like it should be simple, but it wont work.

Instead of using jquery and two images for gray scale effect, use the following:
By adding an css you can bring the same effect using a single image(no need of jquery and hover image).
Add this css:
<pre>
img.a:hover {
filter: url("");
}
</pre>
and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'

adding a small image to a image slider caption with bxslider?

Using bxslider for a little sliding gallery. I want to show captions, which I realize is built in. But...what I'd also like to do is add a small image to the caption.
This is someone elses fiddle: http://jsfiddle.net/s2L9P/3/
It uses span's to display multiple lines of text in the caption:
<ul class="bxslider">
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg"/>
<div class="caption1">
<span>Image 1</span><br></br>
<span>j;jkljlk</span>
<div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
</div>
</li>
.
.
.
But if you stick a img tag in, it just displays as text. How can I put images in the caption?
Thanks!

added image with no problem
see this fiddle
<div class="caption1">
<img src="http://png-3.findicons.com/files/icons/861/tweet_my_web/128/single_bird.png" />
<span>j;jkljlk</span>
<div class="caption2"><a id="img1a" href="#">Visit Australia</a>
</div>
</div>

jquery cycle2 slideshow nested slideshow next and prev buttons

I use cycle2 plugin to display a slideshow comprised of some images and another slide show. The inner slideshow's next and prev buttons does not work for some reason(up and down, in the example) although they are properly set IMHO:
data-cycle-prev="#upDiv"
data-cycle-next="#downDiv"
and
<div id="upDiv">
<img src="images/up.png" alt="" />
<p>scroll up</p>
</div>
<div id="downDiv">
<p>to see more scroll down</p>
<img src="images/down.png" alt="" class="outer-slide" />
</div>
How can I make them work?
here is a demo: http://jsfiddle.net/FKU2L/22/

There're a few issues
First, in cycle 2, nested slideshows should look like this:
<div class="cycle-slideshow" data-cycle-slides="> div">
<div><img src="..."/></div>
<div>
<div class="cycle-slideshow inner-slideshow">
<img src="..."/>
<img src="..."/>
</div>
</div>
<div><img src="..."/></div>
</div>
The important things are that the slides should all be the same tag, like img img img or div div div not img div img. So you'll need to wrap your first level of slide imgs inside of divs. Since they are now not img, which is the default, you need to set data-cycle-slides="> div" on the outer slideshow.
In addition, you also need your inner slideshow to be inside of a div as well, like <div><div class="cycle-slideshow inner-slideshow"> instead of just <div class="cycle-slideshow inner-slideshow">. Slideshows can be nested, but not crossing swords.
What's currently happening on your example is that it's running both slideshows together, using the same next and prev buttons for both shows, and ripping the imgs out of the divs. So instead of running 2 nested slideshows, you're running 2 concurrent slideshows, where one happens to be inside of the other, which is a by-product of the slideshows directly touching each other and the first show's slides not being nested in divs.
made a working fiddle: http://jsfiddle.net/filever10/dLQPD/
You can learn more by viewing the source here: http://jquery.malsup.com/cycle2/demo/nested.php