Hey there! I'm currently working on a website and looking to showcase my product in a similar way as shown here:
I would like my main image to be displayed with all the other variants of the product image underneath, along with the same visual effects. Does anyone have tips on how I can accomplish this? Thank you!
Here is my approach:
A small touch of AngularJs
var sample = angular.module('sample', []);
sample.controller('sampleCtrl', function($scope) {
$scope.pics = {};
$scope.pics.x = {
'small': 'http://placehold.it/150x150/000000',
'large': 'http://placehold.it/500x500/000000'
};
$scope.pics.y = {
'small': 'http://placehold.it/150x150/cccccc',
'large': 'http://placehold.it/500x500/cccccc'
};
$scope.pics.z = {
'small': 'http://placehold.it/150x150/ffffff',
'large': 'http://placehold.it/500x500/ffffff'
};
$scope.currentView = $scope.pics.x.large;
$scope.updateLargeView = function(largePicUriString){
$scope.currentView = largePicUriString;
}
});
CSS Styles
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 500px;
}
.primary,
.secondary {
display: block
}
.primary > img {
width: 100%;
}
.secondary > img {
width: 33%;
}
Jade markup
main(ng-app="sample", ng-controller="sampleCtrl", class="wrapper")
.primary
img(ng-src="{{ currentView }} ")
.secondary
img(ng-repeat="pic in pics", ng-click="updateLargeView(pic.large)" ng-src="{{ pic.small}}")
Here's what it looks like now:
I'm facing a puzzling issue that I just can't crack. Currently, I'm in the process of developing a blog and I've encountered an anomaly with a cookie-generated variable that holds a post ID. Strangely, when I reach the if(isset) stateme ...
I am working with a flexbox layout that currently looks like this: https://i.stack.imgur.com/ULHEk.jpg My main question now is whether there is a way to disrupt the flow externally from the flexbox, so that the blocked element can move to the next positi ...
What is the best way to change the CSS of one element when hovering over another element in CSS? We can achieve this using the following code: .example .example2 li:hover .element If our HTML looks like this: <div class='example'><di ...
Trying to retrieve width and height of an image from this link. <a id="CloudThumb_id_1" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'http://www.example.com/598441_l2.jpg'" onclick="return theFunction();" href="http ...
I have been using the ajaxify-html5.js script from this repository and it has been working flawlessly. However, I noticed that during the content loading process (especially around line 145: $content.html(contentHtml).ajaxify();), there is a brief moment w ...
Given: table dependencies listed in sequence (Generated by MySQL Forward Engineer script) tableA, NULL tableB, NULL tableB, tableA tableC, NULL tableC, tableA tableD, NULL tableD, tableC I am working with a MySQL database containing over 40 relational tab ...
I've been working on updating my Email Contact form with the jQuery Validate Plugin and AJAX within the submitHandler. It initially worked, but I'm running into an issue where it only works once. Upon trying to submit the form again, I stop recei ...
I am facing a challenge with a CSS-only drop-down menu where the top main menu item loses its highlight when I move the cursor over the sub-menu items. You can view the menu in action here: . For example, if you hover over "Kids" and then move your cursor ...
I'm trying to figure out how this Google code works. Here's what I have: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
Is there a way to store values in PHP array or PHP session using ajax in jQuery? I am trying to send some values via ajax to a PHP page and store them. The issue is that every time the array/session only returns the latest sent value, and not the previous ...
I recently upgraded from Bootstrap 3 to Bootstrap 4.1 Within my applications, I utilize ajax loaded modals. In the layout, I have: <div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" ari ...
Currently, I am working on creating dashboards using reactjs. I have successfully implemented 4 tabs or buttons for charts, but I am facing an issue when clicking on different dashboards that have the same chart in the same panel. The chart is not updating ...
Review the snippet below: div { display: flex; flex: 0 0 45%; max-width: 45%; } <div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut ...
I recently developed a bot chatting website using Django and React, which I have hosted on HOSTINGER. The backend is being hosted using VPS. However, some users are able to see the full website while others encounter CORS errors where the APIs are not func ...
I am currently working with NextJS and Zustand and I have a state in Zustand that consists of an array of objects: [{a:1, b:2}, {a:2, b:3}] Additionally, there is another incoming array of objects that contains some of the existing objects as well as new ...
I am using a native AJAX request to insert node values into HTML divs. However, I have noticed that when I update the XML values and upload them to the server while the website is running, Chrome and IE do not immediately reflect the changes (even after re ...
I have inserted three images into the background of my website's body. Two of them are displaying correctly (one with repeat-y), but the third one is not working. I've tried searching a lot but couldn't find a solution. body { backgr ...
I'm encountering an issue with changing the text displayed on a submit button using jQuery 1.4.5: $('.filter_watch').change(function() { $('#filter_submit').val("New text"); }); <script src="https://cdnjs.cloudflare.com ...
Hey there, I'm looking to implement a slider functionality under my canvas that would allow users to change the brush size. Unfortunately, all my attempts so far have been unsuccessful. Can anyone lend a hand? Much appreciated! <canvas i ...
I am trying to retrieve the data from the last month of an API, but I want to avoid hard-coding the date like this: const data = [data.data['Monthly Time Series']['2021-11-30']]. I need a way to dynamically access the 2nd object without ...