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:
My current project involves creating Selenium tests for a particular website. Essentially, when a user navigates to the site, a CMS injects some dynamic elements (HTML + JS) onto the page. Everything works fine when running tests on the Firefox driver. H ...
var image = "path.png"; Is it possible to include the 'image' variable in the jQuery function like this? $('#mapfoto').prepend('<img id="theImg" src="http://path.gr/" + image />'); ...
Is there a way to reformat an array of JSON objects that has the following structure? [{"amount":3,"name":"Coca-Cola"},{"amount":3,"name":"Rib Eye"}] The desired output in plain HTML text would be: 3 - Coca-Cola 3 - Rib Eye What is the best approach to ...
I recently dived into creating unit tests in AngularJS, but I'm struggling with setting up Node.js and Karma. To tackle this, I went ahead and downloaded Node.js from nodejs.org and successfully installed it. I then proceeded to the command prompt an ...
Hello there, I'm new to this community and seeking some assistance. I am currently learning jQuery/Javascript and have encountered a problem that has me stumped. The issue arises with a table where rows are generated based on a user-selected number f ...
I'm attempting to store the facebookPicUrl image in a cookie. Even though I can see it in the callback request, it's not showing up in the browser's cookie storage. Just to clarify, the session cookie is working fine. auth.route('/auth ...
When working on the keyframes section, my computer seems to be having trouble recognizing the from part. Ideally, it should display in blue with the opacity command appearing in grey. Unfortunately, neither of these styles are appearing correctly and I&apo ...
I have an HTML form along with a jQuery function for form validation. After submitting the form values to my PHP files, I notice that the $_POST variable is not being set. What could be causing this issue? <form id="signup" class="dialog-form" action= ...
<template> <div class="about"> <Header /> <h1>Welcome to the dashboard page</h1> </div> </template> <script> import Header from "../components/layout/Header.vue"; export default { name: "dashb ...
This block of code is an excerpt from the Underscore library, specifically showcasing the implementation of the _.bind function. However, I am struggling to comprehend the purpose behind modifying the prototype of an empty function. var customConstruc ...
Having no issues iterating through a simple JSON loop, however, the API I am currently utilizing returns a response with multiple headers. Despite my efforts in various methods to access the results objects, I still face some challenges. The response struc ...
Hi there! I'm looking for a way to enable syntax highlighting for HTML/CSS/JS in Eclipse. My main focus is on developing in Python using the PyDev package, but currently I am working on creating Cheetah templates which are difficult to read without pr ...
During the covid-19 lockdown, I decided to pick up SQL as a hobby. I've managed to successfully retrieve data from my SQL database, but now I'm facing a challenge. I'm struggling with repeating the table using Angular.js based on the data ob ...
I am struggling with my LoadingStatus Function, which has two options: SHOW and HIDE. When a JQUERY POST is made, the Show option triggers to display, while the HIDE option occurs after the RESPONSE comes back. The problem I'm encountering is that s ...
Looking to implement an action only when the user has hovered over a div for at least 1 second. Here's how it's set up: <div @mouseover="trigger"></div> In the script section: data() { return { hovered: false } } m ...
Although I am aware of Object.observe() and Object.prototype.watch(), these features are not widely supported. Fortunately, AngularJS does offer functionality to watch changes on objects. I am currently working on creating a script with similar capabiliti ...
My current web application is stable and running smoothly, built using a technical stack that includes Java, Spring, Hibernate, JSF, HTML, WebSphere 9, Gradle, among others. The packaging is in the form of an ear file which is deployed on WebSphere. I am ...
In the world of web accessibility guidelines, labels are typically associated with form controls like <input> or <textarea>. But what happens when dealing with complex Angular / React / ... components that function as form controls? Picture a ...
As a Java developer transitioning to .NET, I find myself delving into a .NET MVC2 project that requires a partial view for wrapping a widget. These JavaScript widgets come with JSON data objects that need to be populated by model data. Methods are then bou ...
I need to present 3 questions in random order, each with a single choice: Q1, Q2, and Q3. Upon sorting them using DIVs, all radio buttons are then disabled. Below is the HTML markup and JavaScript code snippet: ............................................. ...