I am really puzzled by the implementation done by Minima.pl (http://minima.pl/pl) where they integrated a feature in Isotope library that allows clicking on a thumbnail to open a larger gallery of images. One can click on a single image and cycle through the rest of the images in the gallery while also rearranging the Isotope items.
So far, I have made some progress ->
If anyone has any insights or suggestions on what I might be missing to make this work, I would greatly appreciate it!
Greetings! I am the creator of the minima.pl website ;).
Here is the snippet responsible for rearranging tiles after clicking on one:
$('#mainContent').isotope('reLayout', function(){
$('html, body').animate({scrollTop: item.offset().top - 10}, 400);
});
This code also ensures that the browser window scrolls to the top of the clicked tile.
I have set up this action to trigger after loading the content of the clicked tile through AJAX. The key is to execute it simultaneously with enlarging the chosen tile.
Please feel free to ask any additional questions you may have.
It's quite straightforward to achieve this functionality. Normally, when you click on an Isotope .item, it can be maximised and minimised by subsequent clicks. To add interactivity inside a clicked-on Isotope .item, simply exclude the minimisation function from that specific item. Instead, clicking on another Isotope .item will minimise the previously selected (maximised) item. By keeping track of the previously selected .item, interactions within the maximised .item won't close it. Here's a basic logic for enabling maximising and minimising only through clicking on a "header" zone within each Isotope .item:
$(document).ready(function () {
var $container = $('#container');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 128 // corresponds to the width relationships of .item divs
}
});
// $container.isotope('shuffle'); // randomise for new visitors
$items = $('.item'); // to reference methods on all .item divs later
$('.header').click(function () { // register clicks only on the .header div within .item
var $previousSelected = $('.selected'); // required for switching
if ($(this).parent().hasClass('selected')) {
$(this).parent().removeClass('selected');
$(this).parent().children('.maximised').hide();
$(this).parent().children('.minimised').show();
$items.find('.minimised, .header').removeClass('overlay');
} else {
$previousSelected.removeClass('selected');
$previousSelected.children('.minimised').show();
$previousSelected.children('.maximised').hide();
$(this).parent().addClass('selected');
$(this).parent().children('.minimised').hide();
$(this).parent().children('.maximised').show();
$items.not('.selected').find('.minimised, .header').addClass('overlay');
}
$container.isotope('reLayout');
});
});
You can customize the interactivity within each Isotope .item as needed; whether hardcoded or dynamically...
When you click on a thumbnail, an ajax function will retrieve the same gallery with a larger image to replace the thumbnail. Isotope will then rearrange the gallery for you. Check out this example at or my personal site at .
In Internet Explorer versions 7 and 8, I have implemented a box shadow using the following CSS: box-shadow: 0px 0px 15px #FF00CC; -o-box-shadow: 0px 0px 15px #FF00CC; -moz-box-shadow: 0px 0px 15px #FF00CC; -webkit-box-shadow:0px 0px 15px #FF0 ...
In my React code, I am trying to create a border using the following code: <hr className="borderLine" /> However, when I attempt to style it with CSS, I utilize this snippet of code: .divider { margin: 2rem; width: 100%; color: ...
Visit this page, then click on the next button to navigate to the time slots section. As you hover over any time slot, you will notice a change in appearance. Despite inspecting Chrome's developer tools, I was unable to locate a style with a hover dec ...
The code snippet below is stored in my functions.php file within a Child theme directory. <?php function theme_styles() { wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/bootstrap.min.css' ); wp_enqueue_ ...
I currently have a pie chart displaying smoothly on my webpage, but now I am looking to add a treemap as well. The code snippet for the treemap includes the package {'packages':['treemap']}. It has been stated that only one call should ...
Apologies for my poor English writing :) I am attempting to float two divs side by side in a fixed position, without using percentages. This code works well on most browsers but is not compatible with IE 6. HTML <div class="right"></div> < ...
I'm currently grappling with advanced transitions and transforms, and encountering some challenges with a section I'm developing. I've managed to get everything working as needed, except for the fact that there is an h5 element positioned ov ...
<md-input-container> <label>Scheduled Date</label> <md-datepicker ng-model="editVersionCtrl.selectedPlannedDate" ng-change="editVersionCtrl.checkPlannedDate()"> </md-datepicker> </md-input-container> ...
I'm dealing with a challenge on my assignment. I've been tasked with creating a Shopping Cart using Javascript, HTML5, and JQuery. It needs to collect all the items from the shop inside an Array. While I believe I have most of it figured out, I a ...
Is there a way to center-align the text in this table? The text-center class doesn't seem to be working. <!-- Bootstrap-5 --> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfema ...
I'm currently programming an embedded device in C with a web server. One of the tasks I am working on is downloading files from this device. I need to download several files at once, so I've set up an AJAX request that uses a POST method and send ...
Check out my HTML form below: <form method="post" id="registration-form" action="/register"> <div class="form-group"> <label for="UsernameRegistration">Username:</label> <input type="text" class="form- ...
Is there a way to store a value in one place within an HTML document without the need for a database or PHP? Avoiding the repetition of typing the same value multiple times is the goal. Consider the following scenario: HTML <!-- Desktop --> <di ...
My experience with jQuery Bootgrid has been a bit challenging as I encountered 2 problems related to Pagination. Below is the JavaScript code that I have been working with: The data method in the code below seems to be defaulting to GET, even though I ...
Currently working on a project that utilizes both django for front and back-end. While I've integrated a react page into the project, I'm facing a challenge in passing user information from django to the react page. The structure of my django set ...
Currently, I am facing an issue with a mysql table named clients that I utilize to populate the options of a select in one of the rows. The goal is to automatically fill out 2 input fields with client information when a specific option is selected. To acc ...
I am working with a container div#content that holds three inner divs. I want to ensure that all three divs have the same height, but also expand based on their content. Here is an example of what I have tried: <!doctype html public "-//w3c//dtd html 4 ...
Trying out chart.js for the first time and encountered an issue where the chart is not able to read data from the model. Previously, I had an error message of Error: $injector:modulerr Module Failed to instantiate module chart.js. This was fixed by switch ...
I've been using bootstrap and I'm trying to get the items to align next to each other, but using the bootstrap columns doesn't seem to be working for me. I may be coding it incorrectly. <link rel="stylesheet" href="https://cdn.jsdelivr ...
In my quest to leverage JavaScript asynchronously to its full potential, I am looking for a way to efficiently handle received data from API calls. My goal is to dynamically assign the data to multiple variables such as DataModel01, DataModel02, DataModel0 ...