We Keep Coding

Script appending "=s1400" to image src path and now image will not load

I understand HTML/CSS pretty well, but not JavaScript. There is a script appending "=s1400" after image path. Why? Image will not load because of this. URL is https://zenith-express.com/airfreight.html (source files can be seen with Chrome DevTools).
Source HTML:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder load-high-res shrinkable-img" data-menu-name="HEADER_IMAGE" src="https://zenith-express.com/imgs/af_service_area.png" data-orig-width="688" data-orig-height="420" />
Displayed HTML:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder shrinkable-img" data-menu-name="HEADER_IMAGE" src="https://zenith-express.com/imgs/af_service_area.png=s1400" data-orig-width="688" data-orig-height="420" data-width-before-shrink="700" style="background-image: none;">

I found the answer.
I needed to add "data-width-before-shrink="700" to image tag like this:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder shrinkable-img" data-menu-name="HEADER_IMAGE" src="./imgs/af_service_area.png" data-orig-width="688" data-orig-height="420" data-width-before-shrink="700" style="background-image: none;">

get image src if there is more then image src just get one image src

I am trying to get image src using jquery like this:
HTML
<div class="post_container">
<img src="http://imageurl.com">
</div>
<div class="appendedimageContainer"></div>
Javascript
var imageSrc = $('.post_container img').attr('src');
$(".appendedimageContainer").append('<div class="appended"><img src="'+imageSrc+'"></div>');
The code above works in a healthy way, but the question I would like to ask is here. If the pictures are more than one I want them not to be append. I just want to get one of them append.
For example if a situation as follows:
<div class="post_container">
<img src="http://imageurl1.com">
<img src="http://imageurl2.com">
<img src="http://imageurl3.com">
<img src="http://imageurl4.com">
</div>
<div class="appendedimageContainer"></div>
Just let one of them get a image url and ignore other image src. Can you help How can I do this?

Use nth-child selector to obtain your desired image, e.g.
var imageSrc = $('.post_container img:nth-child(0)').attr('src');

you can use first() to get the first element :-
var imageSrc = $('.post_container img').first().attr('src');

Load clicked image only

I have a CSS lightbox gallery on my website, however it loaded the thumbnails and the large images at the same time.
Below are the contents of my various files;
HTML:
<div class=galerie>
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
</div>
CSS:
.lightbox{display:none;position:fixed;z-index:10001;width:100%;height:100%;text-align:center;top:0;left:0;background:black;background:rgba(0,0,0,0.8)}
.lightbox img{max-width:100%;max-height:100%}
.lightbox:target{display:block;outline:none}
I've added a script (jQuery):
<script>
$("a.galimg").click(function() {
$(".lightbox").each(function() {
$(this).find("img").attr("src", $(this).find("img").attr("data-src"));
});
});
</script>
And now the large files are loaded only after I click a thumbnail.
The problem is that they all load at once, and I want only the clicked one to load at a time.
Is there a way to do this?
I know the each function does that, is there any other function I could use?

I'm not sure why you want to do something like this (would be easier if you post a link to your site) but i'll try to help.
Just don't use 'each' function. So your code should look something like this:
$("a.galimg").click(function() {
var imgID = $(this).attr('href');
$(imgID).attr("src", $(this).data('srcbig'));
});
And for HTML:
<div class=galerie>
<img src=/images/thumbnail.jpg /><img src="" alt="remember about me">
</div>
You could even delete the second 'a href' and image and just create it dynamically. It all depends on how your lightbox library works and what you need.

Attr sets an attribute, if you're trying to use it, I would go with something like this. I'm not sure what you're trying to set the attribute to, but this is the syntax:
<script>
$("a.galimg").click(function() {
$(this).attr("data-src", "your desired data attribute");
})
});
</script>
http://www.w3schools.com/jquery/html_attr.asp

MVC Image Handling using WebImage and JavaScript

In a view, I have the following fieldset which displays images, in thumbnail type form, associated with a particular item:
<fieldset style="position:absolute; top:113px; left: 1050px; width: 300px;">
<legend>Photos</legend>
<div>
<img src="#Url.Action("GetImage1")" alt="" />
<img src="#Url.Action("GetImage2")" alt="" />
<img src="#Url.Action("GetImage2")" alt="" />
</div>
</fieldset>
In my controller, I have the following code:
public void GetImage1()
{
BicycleSellerListing bicyclesellerlisting = db.BicycleSellerListing.Find(1023);
WebImage wbImage = new WebImage(bicyclesellerlisting.ImageList.First().Image);
wbImage.Resize(100, 100);
wbImage.FileName = "Item.jpg";
wbImage.Write();
}
All of this works fine. I am fairly new to MVC, HTML and JavaScript, and don't know how to do the following. What I would like to do is to allow the user to click on an image and have another View load where I display the full size of the image in that view.

It depends what you want to get from this. Do you want it to display the image alone on a new page or show the full image on the same page using AJAX?
If it's the latter, you might want to look into using partial views.

How to display main image when clicked on its thumbnail using jQuery

My DOM looks like this...
<div id="leftPan">
<div id="leftmemberPan">
<img src="/MyApp/images/${article.images[0].imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testingMain"/>
</div>
<div id="thumbnailPan">
<c:forEach items="${article.images}" var="image">
<img src="/MyApp/images/${image.imageName}" alt="/MyApp/img/image_unavailable.jpg" class="testing"/>
</c:forEach>
</div>
</div>
leftmemberPan is showing the main image and thumbnailPan is showing list of thumbnails
<c:forEach items="${article.images}" var="image"> is just a JSTL tag which holds array of thumbnail images.
Please note that I am new to jQuery and using it for the fist time.

You can save a list of the main image src's within the alt tags of the thumbnails and then modify your leftmemberPan src to show the primary image.
Ex:
<img id="leftmemberPan" src="myplace_holder.jpg" />
<img class="thumbnail myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
$(".thumbnail").click(function()
{
var class_array = $(this).attr("class").split(' ');
var newsrc = class_array[class_array.length-1]; // Pull new src from the class tag (assuming it's the last one)
$("#leftmemberPan").attr('src', newsrc);
});
</script>
Keep in mind this is just one way to do it. You can store the primary image in many other ways as well.
Hope this helps!
EDIT: Updated the code example to utilize the class attribute

I would put the path of your image into the data-path tag of each thumbnail, then when you click the thumb, grab that path from data-path and make the src of the main image that path.
Cheers!

Revising previous posts / answers (using jQuery 1.7) ...
<img class="thumbnail" data-file="myimg.jpg" src="myimg_thumbnail.jpg" />
<script type="text/javascript">
var mainImage = $("img","#leftmemberPan")[0];
$("#thumbnailPan").on("click", ".thumbnail", function(event){
mainImage.src = $(this).data("file");
});
</script>
Use a data attribute for the main file image path.
Do one (-time) DOM lookup after page load to reference the main image
element.
Just set the src attribute of the image element using the data attribute of the thumbnail.