CODEWITHSUNDEEP
javascripthtmljquerycsscaption
ard123
ard123

Reputation: 47

change caption color depending on image behind it

I'm working on a portfolio site that is a full browser size container where the image is swapped when moving the cursor from left to right. I achieved this with a jquery script called swinger.js. I had some trouble adding captions to this but with some help from here last night I got it to work using the alt attribute. The problem is now that I want to have some of the captions in white and others in black (depending on the image behind it) and I would like the same to happen to the site title. I added a class inside the img src tag that specifies which should be which. class=“swinger_img_white” for a white caption, class=“swinger_img_black” when it needs to be black But I can't get it to work.

My coding experience goes be a week or two, I got this far by luck, help and dedication to trying code from other websites. Any help would be much appreciated!

*note: with caption I just mean some text that goes with the image (explaining it) by whatever way is possible. Does not have to be built like captions as used in webdesign, just has to work.

Here is what I have right now in a simplified version:

$.fn.swinger = function () {
    return this.each(function () {
        var $container = $(this);
        $container.css({
            "position": "relative"
        });
        var $images = $container.find("img");
        $images.css({
            
        });
        var $middleImage = $($images[Math.floor($images.length / 2)]);
        $middleImage.css({
            "z-index": "2",
            "position": "relative"
        });
        var columnsCount = $images.length;
        $images.each((i, img) => {
            var left = `${100 / columnsCount * i}%`;
            var width = `${100 / columnsCount}%`;
            var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
            $(img).after($column);
            $column.hover(() => {
                $images.css({
                    "z-index": "1",
                    "position": "absolute"
                });
                $(img).css({
                    "z-index": "2",
                    "position": "relative"
                });
                // this was added last night for the captions
                $(".caption").text($(img).attr("alt"));

        
            });
        })
    });
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {

}

.left-holder {
    text-align: left;
    float: left;
    margin-right: 55px;
    width: 250px; }

div.swinger-container {
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; 
    width: 100vw;
height: calc(100vh);

}

div.swinger-container img {
    object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
  }

  header {
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 10px 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-top: -2px;
    text-align: center;
    z-index: 100;
    -webkit-transition: all .2s;
    transition: all .2s; }
    header.header-about {
      color: white !important;
      background-color: white; }
    header h1, header h2, header .about {
      font-size: 1em;
      font-weight: 400;
      display: block;
      line-height: 1.2em;
      margin-bottom: 0;
      padding-bottom: 0; }
    header h1 {
      text-align: left; }
    header a {
      text-decoration: none;
      color: white;
      line-height: 1; }
    header .about {
      text-align: left;
      padding-bottom: 2px; }

      .left-holder{
          color:white
      }

        .caption {
            text-align: right;
            float: right;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Style.css">
    <title>website title</title>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
     <header>
        <div class="left-holder">
            <h1>my name</h1> 
            <h2>what I do</h2>
        </div>
        <div class="caption">

        </div>
       
    </header>

    <div class="slides">
        <div class="swinger-container">
        
            <img src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" class=“swinger_img_white” alt="Caption 1"/>
            <img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2"/>
            <img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 3"/>
            <img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4"/>
            <img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" class=“swinger_img_white” alt="Caption 5"/>
            <img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6"/>
            <img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_black” alt="Caption 7"/>
            <img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" class=“swinger_img_black” alt="Caption 8"/>
            
        </div> 
    </div>

    <script type="text/javascript">
        $(document).ready(init);
        function init() 
        {
            $(".swinger-container").swinger();
        }
</script>

   <script src="swinger.js"></script>
    
  
</body>
</html>

Upvotes: 2

Views: 166

Answers (1)

Nikita Zhuikov
Nikita Zhuikov

Reputation: 1062

I will be good if you keep some information about condition in a data attributes, like that:

<img src="https://..." data-color="white" alt="Caption 1"/>
<img src="https://..." data-color="black" alt="Caption 2"/>

Then you can change color of your caption with .css method which you will pass value from data-color attribute, like that:

$(".caption")
    .text($(img).attr("alt"))
    .css('color', $(img).data('color'));

Upvotes: 2

Related Questions