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');

Pulling Second Image Source Instead of First Using JQuery

I am new to jquery and I am trying to scrape the image source of the second img tag within a div, but can't seem to figure out the correct syntax to pull the second image by id. I feel like this isn't complicated to do, but after trying multiple ways of doing it I'm still stuck and keep getting an "undefined" error. Also not sure if "find" is not the best way to pull this and maybe I should be using something like "getElementbyID"?
Here is the source code I am trying to pull from:
<div class="mainImage" style="width:438px; height:333px;">
<img src="images/default/zoom.png" alt="Click here to see slideshow"
title="Click here to see slideshow" class="zoom" style="display: none;">
<img id="property_image"
src="http://website.com/images/assets/6695_18262.jpg" show="1"
style="width: 438px; height: 333px;">
</div>
Here is what I have:
$('.mainImage').each(function(i, element){
var imgID = $(element).find('img');
var img = $(imgID).find('#property_image').attr('src');
console.log (img);
Any help is much appreciated!

You can simply, use
var img = $('#property_image');
console.log(img.attr('src'));

How to keep text on image slider?

Does anyone know how to keep the text on the image slider?
If the plugins is the solution they should not be heavy it should be easy to understand and implement.

You can add captions under each image using data-captionor in a span after the image.
You can add larger text using the title tag, for example:
<div class="MagicSlideshow">
<img src="example1.jpg" data-caption="Descriptive text can go here." title="Title here"/>
<img src="example2.jpg" data-caption="You can have one or two sets of text, or none at all." title="Another title"/>
<img src="example3.jpg" data-caption="You can also use HTML such as<b>bold</b>,<i>italic</i> and<a href='/magicslideshow/'>links</a>."/>
</div>
Plz refer this one.
Demo

javascript examples display content boxes

I am trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it...I would also like this div to be pushed down as the box described above expands down.
Any suggestions?
Thank you very much in advance!
C*
Forgot the code that I am using...so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it's quite long and I wasn't sure if I should add that (it was create by Dreamweaver when I created a rollover image).
<div class="images">
<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>
<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>
</div>

You don't give much information in your question about your current setup, but assuming that you have your HTML set out something like this:
<div>
<img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
<div id="tux_desc" class="imgDesc" style="display: none">
<p>A cute penguin!</p>
</div>
</div>
<div>
<p>This text is part of the normal document flow</p>
</div>
Then you can use the following JavaScript (which makes use of jQuery):
$('#tux').hover(
function() {
$('#tux_desc').slideDown();
},
function() {
$('#tux_desc').slideUp();
});
You can see it working here: http://jsfiddle.net/wbAxm/1

something like this ought to to do it as long as the div to expand is directly after the image in the mark-up:
$(".class_for_images").on("mouseenter mouseleave", function() {
var content = $(this).next();
if (content.is(":visible")) {
content.slideUp();
} else {
content.slideDown();
}
});
If you want more than this, or it doesn't work, you'll need to post some code so that we can provide more detailed answers...