CODEWITHSUNDEEP
javascriptjquerycsshtml
Raul
Raul

Reputation: 77

Wrap parent text/ css

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

Upvotes: 1

Views: 71

Answers (2)

JPeG
JPeG

Reputation: 821

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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115047

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>

Upvotes: 0

Related Questions