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>

change src of img element by jquery

How to change src of element img?. I want to change this attribute to other, when cite has only one class : user. How to do it? In this case there should change src in img '//img1.blogblog.com/img/blank.gif' to another. Source of img '//somethingelse.gif' should remain the same.
<ol id='bc_0_4TB'>
<li id='bc_0_2B' class='comment' kind='b'>
<div class='avatar-image-container'>
<img src='//img1.blogblog.com/img/blank.gif'></img>
</div>
<div id='c5653317936849872669' class='comment-block'>
<div id='bc_0_2M' class='comment-header' kind='m'>
<cite class='user'>Anonymous</cite>
</div>
</div>
</li>
<li id='bc_0_3B' class='comment' kind='b'>
<div class='avatar-image-container'>
<img src='//somethingelse.gif'></img>
</div>
<div id='c5653317936849872670' class='comment-block'>
<div id='bc_0_2M' class='comment-header' kind='m'>
<cite class='user blog-author'>Author</cite>
</div>
</div>
</li>
</ol>

I want to change this attribute to other, when cite has only one class
: user
You can use:
$('cite[class="user"]').closest('li').find('img').attr('src','newSrc');

To change the src attribute using jquery, just set it using the .attr() function. http://api.jquery.com/attr/
For the logic to change it only when you want to change it. Please show us what you have tried already.

How to make an HTML class containing links a link?

The image and caption, in class story has two different links. Image points to one location and link to another.
I need to make whole class story into a link.
<div class="story">
<img src="linkforimage">
Caption for image
</div>
I need a solution like this:
<a href="link">
<div class="story">
<img src="linkforimage">
Caption for image
</div>
</a>

Nesting a tags is a bad idea. I would use a delegate here. Have a wrapper a tag and in JS check which source span was clicked.
html
<a href="#" class="story">
<span data-href="link"><img src="linkforimage"/></span>
<span data-href="link2">Caption for image</span>
</a>
js (jquery based)
$('.story').on('click', 'span', function() {
document.location.href= $(this).data('href');
});

You can't have anchor tag inside anchor tag.
You can use onclick method to achieve your goal.
<div onClick="window.open(link);" class="story">
<a> <img src="linkforimage"></a>
<a onClick="window.open(link2); event.stopPropagation();" >Caption for image </a>
</div>
EDIT jsfiddle

Clarifying the problem I am facing right now is that I am using embedly platform, where image comes from . So, I just post with link and image are parsed from the link by embedly. But, that ahref takes user to original web site. Caption takes user to the page with that content on my web site. I need to make of caption to the whole div.
So, I found the answer with CSS,
I just added: style=" pointer-events: none;cursor: default;" on the link with image and style="cursor: pointer;" onclick="window.location='link'" on a class "story" in div.

Jquery/Javascript to hide/show div in li

I have many div's on a page, like the one below with different information, using the same classes.
<div class="one-third">
<ul class="img-list">
<a href="#" target="_blank">
<li>
<img src="#" alt="" />
<span class="text-content"><h3 style="color:white" id="one">BRIAN FARGO</h3></span>
<h5 class="text-content-desc" id="two">CEO, inXile entertainment</h5>
<a href="https://twitter.com/BrianFargo">
<img class="speaker-twitter-profile" src="#"></a>
<div class="info-btn" onClick="swap('one','two')">info</div>
</li>
</a>
</ul>
</div>
And a javascript functions is:
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
The problem is, when I click on the "info" button, it effects on all div's, but I need it to only effect on the div which button is clicked.
Like if I click on info of BRIAN FARGO, it should only show/hide/effect BRIAN FARGO'S bio. Not all other speakers.

I don't understand why is your function named swap() when all it does is changes the display attribute of one element to block (which it already is by default) and changes another elements display to none effectively hiding it.
If you have many divs with the same id, that too could be your problem. Id should be unique for each element

Adding a new element HERE where the code is, not after another element

Made some BBcode for phpBB to allow users to post flickr pics with certain tags.
Each photo div in the thread needs to be unique, and the images load when the thread is loaded.
When it comes to the unique DIV, I'm stuck for a way to insert the uniquely named element into the DOM at the point the BBcode is inserted, THEN load the pics. And it appears I can't use PHP in BBcode, nor the templating tags - if I could easily make a unique photo element from the post ID and the flickr tag I'd be laughing. Oh, and I can't touch the template. It's all got to be within BBcode.
So, here's how I make a unique ID:
var flickrUser = "{URL}".split("/")[4];
var tag = "{URL}".split("/")[6];
var photoDIV = flickrUser + "-" + "tag";
Or...there's an element called with a unique post ID just above I could possibly use:
<div id="p61789" class="post bg2">
I tried
var postnumber=$(this).closest('div[class^="post"]').attr('id');
but it always seemed to return the FIRST matching div on the page, not the NEAREST to the point of the BBcode. This element is two "divs" below
<div class = "content">
and below the user posting area there is:
<div id="sig61789" class="signature">
So where I'm completely stuck is navigating to prev() or closest() or parent() or indeed anywhere from the point where I am without having a $(this) link to reference.
So shouldn't something like:
$(this).prev('content').html('<ul class="thumbs" id=photoDIV></ul>');
or even
$(this).html('<ul class="thumbs" id=photoDIV></ul>');
work? Everytime I think I understand jquery it all goes hazy again...
EDIT: More detail added for Pointy:
<div id="p63167" class="post bg2 online">
<div class="inner">
<span class="corners-top">
<span></span>
</span>
<div class="postbody">
<ul class="profile-icons">
<li class="edit-icon">
<a href="posting.php" title="Edit post">
<span>Edit post</span>
</a>
</li>
<li class="delete-icon">
<a href="posting.php" title="Delete post">
<span>Delete post</span>
</a>
</li>
<li class="report-icon">
<a href="report.php" title="Report this post">
<span>Report this post</span>
</a>
</li>
<li class="info-icon">
<a href="mcp.php" title="Information">
<span>Information</span>
</a>
</li>
<li class="quote-icon">
<a href="posting.php" title="Reply with quote">
<span>Reply with quote</span>
</a>
</li>
</ul>
<h3 class="first">
Re: Testing new bbcode - ignore
</h3>
<p class="author">
<a href="viewtopic.php">
<img src="" alt="Post" title="Post" />
</a>by
<strong>
xxx
</strong>» 13 Jun 2011 14:33</p>
<div class="content">
<script>var
APIkey="xxx";head.js("/forum/jflickrfeed/jflickrfeed.min.js","http://jquery-lazy.googlecode.com/svn-history/r14/trunk/jquery.lazy.source.js",function(){var
flickrUser="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[4];var
tag="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[6];var
photoDIV=flickrUser+"-"+"tag";$(this).html('
<ul class="thumbs" id="photoDIV">
</ul>');$.getJSON("http://www.flickr.com/services/rest/?jsoncallback=?",{method:"flickr.urls.lookupUser",url:"http://www.flickr.com/photos/xxx/tags/7thjanuary2010/",format:"json",api_key:APIkey},function(data){$('#cbox').jflickrfeed({limit:30,qstrings:{id:data.user.id,tags:tag},itemTemplate:'
<li>'+'
<a rel="colorbox" href="{{image}}" title="{{title}}">'+'
<img src="{{image_m}}" alt="{{title}}" />'+'</a>'+'</li>'},function(data){$('#cbox
a').colorbox();});});$.lazy([{src:'/forum/jflickrfeed/colorbox/colorbox/jquery.colorbox-min.js',name:'colorbox',dependencies:{css:['/forum/jflickrfeed/jflickrfeed.css','/forum/jflickrfeed/colorbox/example1/colorbox.css']}}]);});</script>
<ul id="cbox" class="thumbs"></ul>
</div>
<div id="sig63167" class="signature"></div>
</div>
</div>
</div>

the problem is you're assuming that the this context when you're executing within the script block is the script block itself, which is incorrect. If there is no context explicitly given, then your context is the window DOM element. Is there any reason you can't move this code to the page level, and initialize all the posts at page load?
$(function() {
$('.post').each(function(i,item) {
console.log(this); //Post DOM element.
//execute your flick retrieval code here.
});
}

Have you tried Javascript's DOM functions to add it?
http://www.javascriptkit.com/javatutors/dom2.shtml
For example, to insert right after the current script, with id "script1":
document.getElementById("script1").parentNode.appendChild( newelement );
You can add raw html too, just set innerHTML of the new element.