Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Displaying photo double its size #897

Open
mylann opened this issue Feb 22, 2021 · 2 comments
Open

Displaying photo double its size #897

mylann opened this issue Feb 22, 2021 · 2 comments

Comments

@mylann
Copy link

mylann commented Feb 22, 2021

Hey,
I have been using Colorbox v1.3.17.2 for years, now it was time to upgrade 😊
I have a gallery, where I need to display photos twice their size in colorbox. Eg: Photos are 400px wide, so I set colorbox to width: '800px'. In the old version everything worked fine and each photo was scaled proportionally. With the new version however the photos are shrinked down to original height.
Is there a way to achieve this with the new version?

Code I'm using:
$('#screenshots-gallery a').colorbox({rel:'photos', width: '800px'});

@jackmoore
Copy link
Owner

@mylann I figured there was probably some way to do this so I tooled around with it for a while and couldn't figure it out. My apologies, I think you are out of luck.

If you know the exact full dimensions of the images (for example, lets say they are all 800px wide and 600px tall), you could set Colorbox to that size and use CSS to scale the image up:

$('#screenshots-gallery a').colorbox({rel:'photos', width: 800, height: 600});

And your CSS would be:

.cboxPhoto { transform: scale(2) }

@mylann
Copy link
Author

mylann commented Feb 24, 2021

@jackmoore thank you for your answer.
Think I'm gonna stick with the v1.3.17.2 version, since it's working as I want. Just wanted to update scripts I'm using.

I don't know the height of all images and size ratio of images can be different in gallery, so I don't want to set the fixed height.

I've got different sized images in each gallery, for example:
https://www.bestoldgames.net/supaplex#screenshots - here are all the images the same height, but they are quite small (320x200)
https://www.bestoldgames.net/prince-of-persia#screenshots - also same size images, but images are big (1440x900)
https://www.bestoldgames.net/resurrection#screenshots - the first image is different height than the others and colorbox 1.3 still manage to display all the images correctly :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants