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 to connect a show/hide and scrollit

I make gallery on my onepage website. I try use show/hide and scrollit
to show more details about my work. But I do not know how to connect it together to make it work.
Here code gallery. When I push it open information about it.
<li>
<a href="#single-project" class="show_hide more" rel="#slidingDiv8" >
<div class="item web-design" data-ref="mixitup-target">
<img src="img/1.png" alt="project 9">
</div>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h6>Amazing Caption</h6>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</a>
</li>
Here is Scrolit which I want to put in the code above.
<li><a data-scroll-nav='4'></a></li>
In the start div i have add
<section data-scroll-index='4'>
How do I connect them show/hide and scrollit to work together? Trying for some time and will only show/hide but not scroll.

Are you trying to use Jquery toggle class ? If yes, Jquery trigger can be call like this $(selector).toggle(speed,callback);
Hope this helps
https://jsfiddle.net/pq8ef3dw/

how to create moving div up and down on click

how can i create moving div like on this site (on right side of slider) Click to see div on web with javascript or jquery ?

The vertical carousel on this page (http://jquery.malsup.com/cycle2/demo/carousel.php) might help you out.
You can Google for jQuery carousel and you will find a lot of further tutorials and downloads for this.
<div class="slideshow vertical"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-next="#next3"
data-cycle-prev="#prev3"
data-cycle-pager="#pager3"
data-cycle-carousel-visible=2
data-cycle-carousel-vertical=true
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
...
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev3><< Prev </a>
<a href=# id=next3> Next >> </a>
</div>
<div class="cycle-pager" id=pager3></div>

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'

Click on Small Image and Overlay Bigger Image

I have several images in a grid. I want each image to overlay to fullscreen when I click on them.
I have this javascript on there, but when I click on the image the one that overlays is the last image on the grip. How should I fix that?
I'm using this, but I have several images:
http://jsfiddle.net/a8c9P/
The only the difference on mine from this is that it is in another div for another javascript that puts it into the grid.
HTLM:
<div class="brick">
<div class="overlay"></div>
<div class="overlayContent">
<img class="imgBig" src="img/Scan.jpg" />
</div>
<img class="imgSmall" src="img/Scan.jpg" height="345">
</div>

check out this
are you trying for this? http://jsfiddle.net/Lqsmr4bu/