I'm trying to have 6 different thumbnails and each one to have its own lightbox gallery. I'm having trouble linking the other images in the gallery to each thumbnail. WHere do I begin? I am using a site that has already been set up. I'm just trying to add in the six separate galleries because right now all thumbnails are in one gallery.
Here is the base code I'm starting with:
<a href="images2/Topo_collection/sunrise/SunriseSet-1.jpg"
rel="lightbox[sunrise]" title="Sunrise Set ">
<img src="images2/Topo_collection/sunrise/SunriseSet-thumb2.jpg"
alt="Modern artisan handmade ceramic decorative relief tile Topo Collection Sunrise Set lead-free glaze"border="0"/></a>
Refer to here
You can use rel attribute to distinguish galleries. as like bellow :-
In first image you can use
image #1
and in second image
image #2
Related
I am creating a gallery in a WordPress site and elementor PRO but I need the layout of the gallery to have different sizes. I mean in a section of 3 columns that a photo is square, the other vertically and horizontally, however when you click on the image you see the image with the measures it has.
I attach links of example
https://www.patricialopes.be/stills
I tried with the galleries provided by Elementor, but it doesn't give me the option to customize the layout.
I remain attentive and thank you!
José
How I can change the way woocommerce show my products image in products catalog page? Woocommerce doesn't show the uploaded images in correct cropping format and the pictures don't look ok. Here's an example: I have tried customized>WooCommers>Product Images>Thumbnail cropping but it doesn't solve the problem for me. The pictures get cropped while I want to show the whole image on the square frame. This is not good if I want to show a pictures with different dimensions! What should I do? I use Flatsome theme.
Try this: Go to Appearance > Customize > WooCommerce > Product Images > select "Uncropped". This should make it so that the original aspect ratio doesn't change, so if all the images are for example a 5:4 aspect ratio, your category/catalog page thumbnails should all be 5:4 images instead of square. If you truly want all the images to look the same (or all be squares), you'll need to re-upload them as the same aspect ratio.
I am currently building a gallery using Divi Gallery Module where some images are horizontal and some are vertical.
The problem is that the theme automatically selects the thumbnail which is ok for horizontal ones, but the position of the thumbnail on vertical (portrait) images is not where I would like it to be.
For example, there is a portrait of a person and the thumbnail previews his chest whereas it would be more appropriate to show a persons shoulders and head.
Is there a way to adjust the thumbnail position and if so what is the easiest method?
I would suggest inspecting the element via your browser and finding the specific class that is placed on vertical images. Knowing the class should allow you to target the vertical images using CSS. You could add the CSS to style.css or via the Additional CSS area in under Appearance < Customizer (found in most themes).
Hope that helps!
I am a back-end developer and I'd like to create a little website using angular and boostrap.
I would like to create a galerie, and I have been looking around to see how it's done. I found a correct example on the following link : https://blueimp.github.io/Bootstrap-Image-Gallery/
In that case, the images are taken from flickr api, which sends 2 different pictures (small and large). The small one is the thumbnail, and when you click on it, it opens the large one.
My question is the following one : let's say I have all my images of different sizes, and that I would like to have thumbnails of those (same size, but responsive !) to create my gallery, what would be the way to do that? With css only?
Create parent <div> with fix width then add img inside by applying width:100% on image and height:auto. Please try to implement the example you found and if you find any issues post with your code.
Im working on a site's gallery which is made of a thumbnail block displaying all the pictures
and a section for displaying a specific image.
This is the code i use to display the thumbnail and the image in its real size.
<a class="thumb" name="tuzla1" href="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" title="Tuzla">
<img height="75" width="75" src="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" alt="Tuzla" />
</a>
The problem is: I can't think of anything to set the size of the opened image. Setting the thumbnail size is fine: height="75" width="75" but the size of the opened one is the problem.
Using this method, you can't set the size of the image you're linking to. It's going to open in the browsers with no HTML associated with it, so it will open at it's full size (or scaled to fit, depending on the browser).
The solution is to link to a page that contains the image. This lets you set code that determines the image size. However, this is a manual process - 500 images will require 500 custom pages. Not ideal.
If you get more sophisticated, you can build a script and pass it and image name, height and width, then dynamically build the page to display the image at the given height and width. Then you can display an arbitrary number of images with 1 script.
Another way to go is with a lightbox plugin which lets you pop the full sized image up into a box over top of the rest of the page. You've probably seen this method used on Facebook or other sites - it's popular and doesn't take that much effort to use. I like it because you don't have to leave the page you're on, and you can show lots of photos on a fairly compact page.