How to render singleline imagelist in rows and columns - javascript

I am looking for a solution to build the following UI in the picture that I attached in the post in react. Plus, this post shares a linkage to another post that I have posted on the site as well: How to add a single line image list that is horizontal scrollable (in react js).
The solution can be in the form of using MUI library or pure js and css. In the following image, the component SingleLineImageList contains a list of images.
I would like to render the image in the following sequence. The first two image will be in large and the next 4 images will each have 1/4 width and height of the larger size images and will be structured as the in the following (img 3 to 6). And, the cycle repeats. I have look for solution from MUI 4.0 imagelist library: https://v4.mui.com/components/image-list/#api and here is the sandbox code that I have created : sandboxlink
However, I do not have a solution on rendering the 4 images using loop iteration as per shown in the following image. Can anyone give some idea/ advice on this, thanks!

I manage to find a solution using grid css and doing a brute force method
Here is the codesandbox link link

Related

How can I add a grid of shapes to a slick carousel?

I'm working on a class project at the moment and I'm having some trouble with the front-end part of it.
What I'm trying to do is implement a grid of hexagonal like shapes (I'm using this example by web-tiki), that works exactly as I want when resizing the screen.
I want to put this grid in a carousel-like div, that adds a page with the same number of items when resizing, instead of stacking them underneath, thus taking up more space downwards.
I've been through a lot of research, but none of the examples given seemed to fit my case. Can anybody give me an insight on how to do that?
Edit: Based on Rustyjim's comment, I actually edited the carousel's js file to fit my needs, so consider the issue solved. Thanks for the responses!

is there a js library for displaying image search results in rows with optimal spacing?

Sites like google image search display images of varying width in rows. Apparently, they select which images to group together, and which images to make a bit smaller, in order to achieve a fairly even spacing between the images.
I tried to search online for a library that implements such an algorithm.
I am asking here if anyone knows of such a solution and if not, I could use some pointers on how to write this code myself.
UPDATE: I found photowall using jquery.
this seems to be the answer. I am currently searching for an angular.js directive
There is the library Masonry (the one mplugjan also mentioned). This library is very flexible in the way you can set up a grid. See their options page.
If you want to do it your self, you have roughly two options:
The images have a fixed/max width
The images have a fixed/max height
Google Images give their images a max height, which allows them to creates rows, and position the images inside them.
The other option is to create columns of a fixed with and place the images in these columns. This option, however is a bit harder to implement, because you have to think harder about the order in which the images are placed.
Edit:
After a quick look at Photowall, it seems that Masonry is more flexible. The documentation on the Masonry site show far more examples in mixing various heights/widths.

How to align an image in Qooxdoo?

I'm currently creating a new Qooxdoo application, and have setup a layout similar to the Feedreader demo, with a banner image across the top (logo etc). I've had no problem adding the image into the javascript but cant for the life of me find a way to have it right-aligned on the screen. I've tried using various layout options, vbox, hbox, atom etc but no joy.
Unfortunately because of the perl-based compiler I've been developing this on my laptop at home rather than on the web server so I can't paste in my code at this time.
Any ideas?
If not, I'll post the code later on.
Thanks
Did you try a simple canvas layout and align the logo on the right? Just check out the playground sample over here: http://tinyurl.com/cuufhmh

Image generator plugin

I'm searching for Javascript (JQuery if possible) plugin that can generate an image representing the inner content of a DIV.
Example : This link shows an image containing 3 x 3 box display.
What I would like is that these boxes could contain an automatically-generated picture showing what a specific DIV's content look like.
Is there such a thing?
If you don't have too much content on the screen, this seems like a simple option
html2canvas
It is well documented
Well tested
But it will not work for all elements
It will not work with all atributes
But this is the solution if you want to take the screenshot of your page only(where you know the possible attributes and elements)
I don't think that Javascript can create an image from the scratch, but for sure is possible to make that on the server and use JS to make an AJAX call to it.
Hope this helps.
You could use "webkit to image" wkhtmltoimage: https://code.google.com/p/wkhtmltopdf/ I've used it to generate images from javascript graphs and tables etc. Any html will work. Its not purely javascript, but you could send the html div (and relevant css) to the wkhtmltoimage and get the image back via ajax.

Break up HTML content into carousel items

I would like to take some arbitrary HTML and display it in a carousel, showing a page at a time. For example, see how articles are laid out in the NY Times iPad app. I have achieved the column layout using the -webkit-column-width CSS property, and it works as expected if I add empty carousel items:
http://www.senchafiddle.com/#ea1RR
However, I need to figure out programmatically how many dummy carousel items to add, based on the number of columns. As far as I can tell, there is no way to find the width of the text, since the extra columns are overflow and don't affect the size of the element. Any help with this issue, or ideas on other ways I could achieve the same functionality, would be appreciated.
I think this solution can be adapted to fit your needs: http://www.webdeveloper.com/forum/showthread.php?t=196319
If you have problems start a senchafiddle so i can inspect your code

Categories

Resources