Wrap parent text/ css

Question

I am trying to add a caption under an image which is responsive so my code looks like this

function showVideo(obj) {
  $("#youtube").attr("src", $(obj).data("src"));
  $('#videoModalLabel').text($(obj).data("title"));
  $("#videoModal").on("hide.bs.modal", function() {
    $("#youtube").removeAttr("src");
  }).modal('show');
}

figure {
  display: inline-block;
}
figcaption {
  margin: 10px 0 0 0;
  font-variant: small-caps;
  font-family: Arial;
  font-weight: bold;
  color: #bb3333;
}
figure {
  padding: 5px;
}
.vid img:hover {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
.vid img {
  transition: transform 0.2s;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  padding: 1px;
  border: 1px solid #021a40;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row vid">
  <figure>
    <img class="img-responsive" src="resources/image/18/85/a.jpg" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1" onclick="showVideo(this)" />
    <figcaption>
      This is long text which overlaps the caption beside it I Want it to break automatically according to window size
    </figcaption>
  </figure>
</div>

Here I have two issues:

My caption is long so it goes out of the way and I want my data title to become <figcaption> so I dont have to rewrite it

Related - http://stackoverflow.com/questions/37884416/is-it-possible-to-wrap-the-contents-of-this-div-based-on-one-element-over-anothe — Paulie_D, Aug 05 '16 at 16:04

JPeG · Accepted Answer · 2016-08-05T19:13:48.367

1

Just need to make img width 100%:

Here's a fiddle where image and text stay the same width/size on all resizes:

https://jsfiddle.net/h9kj04kv/

.vid img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;   
   padding:1px;
  border:1px solid #021a40;
  width: 100%;
  }

If you want to keep it from getting too big then just add a max-width and max-height to the vid div.

EDIT: Didn't see second part.

To inject your text into the data-title just add this:

$(function(){
   $('.img-responsive').attr('data-title', $(figcaption).text())

})

And finally to keep images the same size as text/caption:

$(function(){
   figWidth = $(figcaption).width()
   $('.img-responsive').css('width', figWidth)
})

UPDATE: If you have many videos in a row you will need to create a grid system.

<div class="row vid">
<div style="width: 25%; float:left;">
            <figure>
                <img class="img-responsive"  src="https://i.stack.imgur.com/lro0o.png?s=48&g=1" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1"  onclick="showVideo(this)" /> 
                <figcaption>
                    This is long text which overlaps the caption beside it I
                </figcaption>
            </figure>
</div>
<div style="width: 25%; float:left;">
            <figure>
                <img class="img-responsive"  src="https://i.stack.imgur.com/lro0o.png?s=48&g=1" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1"  onclick="showVideo(this)" /> 
                <figcaption>
                    This is long text which overlaps the caption beside it I
                </figcaption>
            </figure>
</div>
<div style="width: 25%; float:left;">
            <figure>
                <img class="img-responsive"  src="https://i.stack.imgur.com/lro0o.png?s=48&g=1" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1"  onclick="showVideo(this)" /> 
                <figcaption>
                    This is long text which overlaps the caption beside it I
                </figcaption>
            </figure>
</div>
<div style="width: 25%; float:left;">
            <figure>
                <img class="img-responsive"  src="https://i.stack.imgur.com/lro0o.png?s=48&g=1" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1"  onclick="showVideo(this)" /> 
                <figcaption>
                    This is long text which overlaps the caption beside it I
                </figcaption>
            </figure>
</div>
               </div>

edited Aug 05 '16 at 19:13

answered Aug 05 '16 at 16:01

JPeG

811
6
11

Thanks this works fine but here the image size is take from text larger texts get big image and smaller texts(captions) gets smaller image I want image size to be same for all and text should fit them PS: I tried max-width – Raul Aug 05 '16 at 16:05
how to add these functions in script ? – Raul Aug 05 '16 at 18:30
Thanks for your reply but again if I edit your fiddle and add some more text in
line:5 the size of image increases
– Raul Aug 05 '16 at 18:40
Right, it will increase to match the width of the text. The text will fill the available window. Which is what you requested, an image that stays the same size as the caption. Not quite sure what you are looking for then. – JPeG Aug 05 '16 at 18:48
I have 12 videos 4 in each row, each image has same size but different captions so I want all 4 images in each row to be same size but the caption could be larger I can use
but it's not responsive – Raul Aug 05 '16 at 19:04
See updated answer. You will need to wrap the figure's in another div that has a width %. And you may also need to use float: left; – JPeG Aug 05 '16 at 19:09
I tried that but then all my images are coming in one column – Raul Aug 05 '16 at 19:11
Yeah, you need the float: left;I updated my answer and Updated fiddle: https://jsfiddle.net/h9kj04kv/3/ – JPeG Aug 05 '16 at 19:13
yup works great Thanks :) One issue though when I reduce my window size >400px they all come in one row I get it, its because of width 25% do you have a solution for that too? like col-md-3 col-xs-6 ?? because they all overlap instead they can come in different row – Raul Aug 05 '16 at 19:18
Yeah bootstrap allows you to set your percent based on resolution. So in this case you would want col-md-3 but then on your smaller screen you will want col-sm-6 and then on mobile you will want col-xs-12. So put them all together in the class:
– JPeG Aug 05 '16 at 19:25
works great Thanks a ton but still one problem first row I have 4 images with 2nd image having larger test so its caption is split in 2 lines so my second row start under image 3 of first row – Raul Aug 05 '16 at 19:34
Yeah, this is something I've ran into before. Really there are two ways to handle it. Either ellipse your text so that it cuts off and goes to ... and then apply a tooltip to it (not ideal). The other option is to set a static height on your divs so that they are always the same height. In this situation you may have some extra whitespace in some divs, but they will all be even 100% of the time. Sometimes adding a border and padding makes it less noticeable. – JPeG Aug 05 '16 at 19:36
how do I Apply height as I am using bootstrap so I guess it will automatically take it. And I try to do it manually it will stay same when I reduce my window size – Raul Aug 05 '16 at 19:42
Actually that's not an issue because your problem will disappear on mobile. Reason being is that they will not be stacked next to each other and instead will just stack. So what I would do is add a class to the divs and then in your media queries set the height for desktop but don't set the height for mobile breakpoints. That way mobile won't have whitespace but your desktop view will all be the same height. – JPeG Aug 05 '16 at 19:46
Thanks a ton. I did the same thing but instead in my media query for max-width:480px(for mobile) I set height=auto and it works Thanks a lot I really appreciate your help.. – Raul Aug 05 '16 at 19:52

score 0 · Answer 2 · answered Aug 05 '16 at 16:02

This will solve the first issue

figure {
  display: table;
  width:1%;
}

function showVideo(obj) {
  $("#youtube").attr("src", $(obj).data("src"));
  $('#videoModalLabel').text($(obj).data("title"));
  $("#videoModal").on("hide.bs.modal", function() {
    $("#youtube").removeAttr("src");
  }).modal('show');
}

figure {
  display: table;
  width: 1%;
}
figcaption {
  margin: 10px 0 0 0;
  font-variant: small-caps;
  font-family: Arial;
  font-weight: bold;
  color: #bb3333;
}
figure {
  padding: 5px;
}
.vid img:hover {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
.vid img {
  transition: transform 0.2s;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  padding: 1px;
  border: 1px solid #021a40;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row vid">
  <figure>
    <img class="img-responsive" src="http://www.fillmurray.com/460/300" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1" onclick="showVideo(this)" />
    <figcaption>
      This is long text which overlaps the caption beside it I Want it to break automatically according to window size
    </figcaption>
  </figure>
</div>

Thanks for your answer.. IT takes all my images to left side and they all come in one column I want them like 4 images in a row and when window size reduce it should reduce to 3 videos in a line then 2 likewise.. — Raul, Aug 05 '16 at 16:15
inline-table also doesn't work it brings them in column but sizes still depends on text size so the image with larger caption appears bigger — Raul, Aug 05 '16 at 18:42

Wrap parent text/ css

2 Answers2