I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1].
I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jcarousel is incompatible with jQuery version 1.9.1 or higher. I need a structure that mimics the functionality of Zalando.
Welcome! I have wrapped up your entire merchandise (let's dub it .product-item) in a <div> so that when you hover over the main image (or other visible options), you can toggle the visibility of the choices:
By default, hide the options with CSS:
#name-carousel {
float: left;
display: none;
}
Enclose your product in a container (HTML):
<div class="product-item"> <!-- This serves as the container -->
<div id="name-carousel" class="container">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li id="carousel-selector-1"><img src="http://placehold.it/100x50&text=slide1" /></li>
<li id="carousel-selector-2"><img src="http://placehold.it/100x50&text=slide2" /></li>
<li id="carousel-selector-3"><img src="http://placehold.it/100x50&text=slide3" /></li>
<li id="carousel-selector-4"><img src="http://placehold.it/100x50&text=slide4" /></li>
<li id="carousel-selector-5"><img src="http://placehold.it/100x50&text=slide5" /></li>
</ul>
</div>
<div class="bigProductimage">
<img data-img="http://placehold.it/400x200&text=slide0" src="http://placehold.it/400x200&text=slide0">
</div>
</div>
To toggle the visibility of the options on hover (using jQuery):
productItem.hover(function() {
$("#name-carousel").fadeToggle();
});
Check out the updated fiddle here: http://jsfiddle.net/CliffBurton/6svy9ocy/3/
I have been using php to develop my website. Up until now, I have relied on setTimeout with ajax for updating chats simultaneously. However, when this method stopped working, I discovered socket.io. My goal is to implement private messaging, and while I ha ...
Below are the codes that I have created to illustrate my question. It's not a complete set of code, just enough to explain my query. The process goes like this: HTML loads -> calls ajax -> gets JSON response -> appends table row with the JSO ...
When I utilize require(./filename), I am able to include and run the code within filename without any explicit export being defined inside filename. In ES6, what is the equivalent of this using import ? Appreciate it ...
I currently have an animated image set up like this: <div class="image_for_sping"> <img src="/anyimage.png"> </div> The image has a style attribute added by jQuery which contains the following animation properties: animation: spin3 ...
I experimented with this code snippet in an attempt to fade out an image, .splash-wrapper { animation: fadeIn 4s; -webkit-animation: fadeIn 4s; -moz-animation: fadeIn 4s; -o-animation: fadeIn 4s; -ms-animation: fadeIn 4s; animation-duration: ...
Check out the code snippet below: <table> <tr> <td class="bgimg" valign="middle" width="10%" title="some title" nowrap> <img src="images/SomeLogo.gif"/> </td> </tr> </table ...
As I develop a filter feature, I have categories and cities in the format: ['New York'], ['Cars']. The goal is to iterate through them to retrieve products based on each city or category. My approach involves storing these products in t ...
I encountered a unique issue with webpack and aurelia that I can't seem to figure out. After creating a new webpack configuration based on online resources and official documentation, the compilation goes smoothly without any errors. However, during r ...
One of the challenges I'm facing involves a CSS design with a div called .testimonial-inner that has an arrow created using the :after pseudo element. The issue is making them appear as one cohesive element, especially when applying a box-shadow. Her ...
Is there a clever way to use CSS and/or JavaScript/jQuery to adjust the size of images only when necessary for them to fit within a fixed-height container alongside the remaining content? Upon reviewing the images in the 'new this week' and &apos ...
I'm a beginner in javascript and ajax, attempting to call a php function that retrieves a patient's age in a javascript file. Despite looking into solutions on this topic, I haven't been able to figure it out yet. Here is the content of the ...
I am currently developing a Google Chrome extension and I want to express my gratitude to everyone here for tolerating my sometimes silly questions. The functionality of the extension is quite basic but it works smoothly. However, I am facing an issue wher ...
I'm in the process of creating a flexible website design. https://i.sstatic.net/68qW2.png Everything seems to be going well so far. Here's what I have: <div class="container"> <div class="products-block"> <h2>Prod ...
Often I catch myself adding this (simplified) code in multiple javascript files: $(document).ajaxError(function (e, xhr, settings, exception) { alert('error in: ' + settings.url + ' \\n' + ...
I am facing difficulties while trying to extract nested JSON API data in NEXTJS. Specifically, I am struggling with extracting a dictionary within a dictionary from the API file. In the example provided below, I have only been successful in consuming entr ...
I have integrated the jQuery File Upload plugin () into my website for image uploads. Here is my code snippet: $('#fileupload').fileupload({ url: 'server/index.php', dataType: 'json', dropZone: $('#dropzone&a ...
I have developed a component that accepts a template: export class TemplateParamComponent implements OnInit { @Input() items: Array<any>; @Input() template: TemplateRef<any>; } Here is the HTML code: <template #defaultTemplate le ...
Currently, I have an application (let's call it exe1) provided by the supplier of our instruments that I would like to integrate into my existing application. Instead of rewriting exe1 from scratch, I am considering embedding it using something like a ...
I am attempting to center align some links within my div, while also ensuring that the text of the links is aligned to the left. However, I have been unsuccessful in achieving this. I can either align them to the left or center, but not both simultaneousl ...
Thank you for taking the time to read this, any feedback is greatly appreciated. The current script on my website is only partially functional (click "i" in the bottom right corner). Currently, the script will focus on the first link AFTER pressing the T ...