jquery - Javascript set a variable that changes on each child item -


It may seem like a easily answered question, but it is the one I am struggling for a while.

Tell me first what I am trying to achieve.

I have a gallery of images and I want to have each image centered to stand inside its container. The sizes, shapes, and aspect ratios are different in the images, so my code should be the variable for each image. Even I have so far:

  & lt; Div id = "cbp-fwslider" class = "cbp-fwslider" & gt; & Lt; img src = "picture / large / 1.jpg" alt = "img01" /> & Lt; img src = "picture / large / 2.jpg" alt = "img02" /> & Lt; img src = "picture / large / 3.jpg" alt = "img03" /> & Lt; / Div & gt;   

And here is my javascript:

  var $ img = $ ('div # cbp-fwslider img'); Var ih = $ img.height (); Var $ div = $ ('div # cbp-fwslider'); var DH = $ div.height (); If (DH> IH) {var dif = (DH - IH); $ Img.css ('margin-top', + dif / 2 + "px"); }   

Now, it works in the part. What it does is calculate the correct "margin-top" so that the first image is standing inside the container, but then it is included in all. I have no doubt that this is because I set javascript to set "margin-top" for all the images.

My question is, how can I set a variable to make it, does it differently for those items which are kept in my gallery?

Forgive me if this is a fundamental question that I can get an answer for elsewhere, I am very wet behind the ear when it comes

Besides, if any I know in a simple / more efficient manner to get what I want, it would be good if you can tell me in the right direction.

I recommend that there is a dynamic height in the container and therefore make all the images. With its nature how the gallery works, I am unable to use the full position and the technology also does not work.

Thanks in advance for any help.

You would like to run your code individually on each image instead of collection of images By looping each by archiving:

  $ ('div # cbp-fwslider img'). Each (function () {var $ IIG = $ (this); var IH = $ img.height (); var $ div = $ ('div # cbp-fwslider'); var DH = $ div.height (); if (dh> ih) {var dif = (dh - ih); $ img.css ('margin-top', + dif / 2 + "px");}});    

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -