Skip to content

Instantly share code, notes, and snippets.

@techhjork

techhjork/imageswitch.php

Created May 20, 2022 15:52
Show Gist options
  • Save techhjork/d3f440436fc7d41f95f00aecf5da9616 to your computer and use it in GitHub Desktop.
Save techhjork/d3f440436fc7d41f95f00aecf5da9616 to your computer and use it in GitHub Desktop.
Download ZIP
Product Image change on mouse over and enter with foreign key
Raw
imageswitch.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>product</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style type="text/css">
.imgs{
-webkit-transition: all .5s ease-in;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-in;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-in;
-o-transition: all .5s ease-out;
}
.change{
-webkit-transition: all .5s ease-in;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-in;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-in;
-o-transition: all .5s ease-out;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="container">
<h1 style="background: gray;height: 150px;color: white;">My products</h1>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "check";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$data = $conn->query("SELECT * FROM `products` JOIN `images` ON products.product_id = images.product_id ")->fetchAll();
?>
<div class="row align-items-center justify-center">
<?php foreach ($data as $row){?>
<div class="col-xl-3 col-md-6 col-12 m-2" style="width: 200px; height: 300px;">
<a href="?product_id=<?php echo $row['product_id'] ?>">
<img style="object-fit: cover;" src ='<?php echo $row['image_path1'] ?>' data-src1="<?php echo $row['image_path1'] ?>" data-src2="<?php echo $row['image_path2'] ?>" width=100% height=100% class="imgs" id="img_<?php echo $row['product_id'] ?>" >
</a>
</div>
<?php } ?>
</div>
<?php
} catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null;
?>
</div>
<br>
</div>
<script type="text/javascript">
$(document).ready(function () {
// $(".imgs").each(function(i,el){
// $(this).mouseenter(function(){
// $(this).addClass("change").delay(500).attr("src",$(this).attr("data-src2")).queue(function() {
// $(this).removeClass("change").dequeue();
// });
// }).mouseleave(function(){
// $(this).addClass("change").delay(500).attr("src",$(this).attr("data-src1")).queue(function() {
// $(this).removeClass("change").dequeue();
// })
// })
// })
$(".imgs").each(function(i,el){
$(this).mouseenter(function(){
$(this).attr("src",$(this).attr("data-src2"))
}).mouseleave(function(){
$(this).attr("src",$(this).attr("data-src1"))
})
})
// $('.imgs').hover(function () {
// $('#img1').attr('src',"" )
// $('#img1').css({
// "box-shadow": "5px 10px 12px 6px, 0 0 5px 8px gray",
// "color": "gray"
// });
// },
// function () {
// $('#img1').attr('src', "")
// $('#img1').css({
// "box-shadow": "5px 10px 12px 6px white, 0 0 5px 8px white"
// });
// });
});
</script>
</body>
</html>
<!--
Database = Check
CREATE TABLE `images` (
`img_id` int(11) NOT NULL,
`product_id` int(255) NOT NULL,
`image_path1` varchar(1000) NOT NULL,
`image_path2` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `images`
--
INSERT INTO `images` (`img_id`, `product_id`, `image_path1`, `image_path2`) VALUES
(1, 1, 'https://cdn.shopify.com/s/files/1/0389/3375/8084/products/S1-Yellow-Tigers-_YT_-Web-HM-Front2_900x.jpg?v=1643513431', 'https://cdn.plotch.io/image/upload/w_300,h_450/C/V/PLOrJKe5rn1633524727_3a10cbea4e0e183bd925062fc17463c44343f6e20227fb51570cdb514dbc5916.jpg'),
(2, 2, 'https://media.architecturaldigest.com/photos/622a0e84524511c5a6733aaa/master/w_1703,h_2560,c_limit/Sleeper_PF2003P_Sizeless-Pajama-Set-with-Pants-in-Blue_285-3-1.jpg', 'https://assets.ajio.com/medias/sys_master/root/20211014/2kn6/6168702bf997ddf8f1d33330/-1117Wx1400H-463153644-blue-MODEL.jpg');
-- --------------------------------------------------------
--
-- Table structure for table `products`
--
CREATE TABLE `products` (
`product_id` int(11) NOT NULL,
`product_name` varchar(255) NOT NULL,
`product_type` varchar(355) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `products`
--
INSERT INTO `products` (`product_id`, `product_name`, `product_type`) VALUES
(1, 'Yellow Kurta', 'female cloth'),
(2, 'Blue pajama', 'female cloth');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `images`
--
ALTER TABLE `images`
ADD PRIMARY KEY (`img_id`),
ADD KEY `product_id` (`product_id`);
--
-- Indexes for table `products`
--
ALTER TABLE `products`
ADD PRIMARY KEY (`product_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `images`
--
ALTER TABLE `images`
MODIFY `img_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
--
-- AUTO_INCREMENT for table `products`
--
ALTER TABLE `products`
MODIFY `product_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
--
-- Constraints for dumped tables
--
--
-- Constraints for table `images`
--
ALTER TABLE `images`
ADD CONSTRAINT `images_ibfk_1` FOREIGN KEY (`product_id`) REFERENCES `products` (`product_id`);
COMMIT;
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment