Magnific Popup - Can you create 2 different Galleries on the same page? - magnific-popup

I am trying to optimize a website. I am trying to reduce the photo sizes when loading on mobile. I can change the preview image based on a media query which is helpful but when you click on the gallery the image size does not change based on that media query. It is always the size you set as the tag. My first though was to create two galleries that appear when it is hit by a media query. But, when I created the second one it just combined both galleries (with the different resolutions of photos) so instead of 44 images you get 88. Is there a way to go about this? Where you have a reduced image quality gallery that is loaded when on a simulated mobile device and a full quality gallery that is loaded otherwise.

Related

How to put two videos below in the background of the site?

When I put two videos, the videos are placed on top of each other or with a space.enter image description herelike this
I posted two videos with different classes, but no matter what I do, the background doesn't turn out the way I want.enter image description here
I want it to be like this

Icon or image (PNG), which is the most performative?

I'm working on a project that involves displaying a map (https://github.com/react-native-community/react-native-maps) and there are 34 possible types of picture pins (PNG) and I'd like to know which becomes more performative. Keep using these images or adopt the use of icons? Taking into account that the images have on average 10Kb
For those who do not know, converting to SVG can turn into an icon (https://github.com/oblador/react-native-vector-icons)

"Spotlight" trancparency

I am creating a medical image application. I have two images. The first is identical to the second except that the it has a skeleton superimposed over it. I would like when the user moves the mouse over the overlaid image a spotlight area of transparency will show the image underneath. I have done this with javascript on web pages but I can't find how to do it with VB 2015. I was able to sort of make it work using 21 separate images and swapping them but it's messy and doesn't work well.

adjust photo size auto small large

I have a website for pictures and I am not satisfied with the quality that displays because users add big photos and script resizes them and lose quality. This website uses GD library or ImageMagick , I want the picture to be displayed in an auto option but to add two buttons for users to view photos enlarged or reduced size.
This is the demo website of the script that I use: http://artvenue-abhi003.rhcloud.com/image/26/odit-nisi

Best way resize photo gallery for preview

My app has more then 1000 photos and 50 galleries. It looks like as iphone Photos app. In preview list of gallery I have problem with performance.
In profile I saw what [sourceImage drawInRect:thumbnailRect] take 96% of time.
What is the best way to fix this issue?
Duplicate with small size of images I did.
Perhaps there is another solution?
Best way is to create thumbnail images for every Image File and save them as thumb_orginalimagefilename.png.
You can batch edit images in many desktop publishing programs.
Photoshop or Fireworks. In Picasa you can just multi-select a ton of images, like an entire folder and then Export to File and choose the output size
Create three large images that contain all of the thumbs in each gallery and load them in one UIScrollView with semi-transparent UIImageButtons over the locations where the thumbs appear in the image.
This could prove faster, since you only load one image per gallery, but you would have to try it to find out. I have done this before as it helped to reduce the size of my app.