CODEWITHSUNDEEP
htmljquerycssimagecaption
ard123
ard123

Reputation: 47

swinger.js website image swap on cursor move, how to make image caption?

For the past week I have been trying to create a website which is 100vh & vw where the images swap when you move the cursor from left to right.

I have almost no prior coding skills but I managed to get it working using a script called swinger.js So far so good. But now I want to add an image caption in the header that shows the right caption with the right image. But I can't seem to figure out how to do this...

Any help would be appreciated! Thanks,

Here is the code so far

$.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"
                });
            });
        })
    });
}
*{
    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; 
    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;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>TITLE</title>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
     <header>
        
    </header>

    <div class="slides">
        <div class="swinger-container">
        
            <img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” />
            
            <img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
            
            <img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
            
        </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: 239

Answers (1)

Frenchy
Frenchy

Reputation: 17007

i have added an attribute title to your html (see string of image)

and I have lightly modified yout swinger code to select the right title and display in header

$.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"
                });
                // just added one line
                $("header").text($(img).attr("title"));
            });
        })
    });
}
*{
    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; 
    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;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>TITLE</title>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
     <header>
        
    </header>

    <div class="slides">
        <div class="swinger-container">
        
            <img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” title="image left"/>
            
            <img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” title="image center"/>
            
            <img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” title="image right"/>
            
        </div> 
    </div>

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

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

Upvotes: 1

Related Questions