Fancy Box Issues/Help

[wez1007]

Hi guys, Ive been working on my own site based off of a template by ALESSIO ATZENI.

The site is a one page layout with Fancybox doing all the media. I have a little gallery over HERE. The problem i am having is that all images that are vertica are not sized properly compared to the horizontal images.

I have tried making the height of the vertical images the same height as the horizontal files but that doesn't help.

Another issue I'm having, well its more something i want to change, Is that i would like to show a default gallery/section of the portfolio part of the page. Deleting the Filters for the "All photographs" set just removes the link and when the page is loaded it still shows all the photographs and not just one set.

I'm not a web dev at all and have made this a bit of a project for myself. Any help will be appreciated

Thanks!

 

[francdore]

Hi guys, Ive been working on my own site based off of a template by ALESSIO ATZENI.

The site is a one page layout with Fancybox doing all the media. I have a little gallery over HERE. The problem i am having is that all images that are vertica are not sized properly compared to the horizontal images.

I have tried making the height of the vertical images the same height as the horizontal files but that doesn't help.

Another issue I'm having, well its more something i want to change, Is that i would like to show a default gallery/section of the portfolio part of the page. Deleting the Filters for the "All photographs" set just removes the link and when the page is loaded it still shows all the photographs and not just one set.

I'm not a web dev at all and have made this a bit of a project for myself. Any help will be appreciated

Thanks!

I just had a look at your gallery and the image sizes looks fine to me?

Regarding the filters, I see that you have these attributes on the filter links. So you want to show all photos by default and remove the filters on the left?

What happens if you remove this code? Does it display all images?

<ul id="filters" class="option-set" data-option-key="filter">
   <li class="type-work">Categories</li>
   <li><a href="#filter" data-option-value=".Portraits" class="selected">Portraits</a></li>
   <li><a href="#filter" data-option-value="*" class="">All Photographs</a></li>
   <li><a href="#filter" data-option-value=".Landscapes" class="">Landscapes</a></li>
   <li><a href="#filter" data-option-value=".Miscellaneous" class="">Miscellaneous</a></li>
</ul>

You can always setup a new blank page, install the jQuery Colorbox plugin and then just add your photos to the page.

 

[wez1007]

Thanks for the reply.

I just had a look at your gallery and the image sizes looks fine to me?

The to vertical images with white backgrounds arnt playing nice with the layout. Ideally iw ant all the images to be in a nice grid style layout and then once they are clicked on you get a nice lightbox to view them in.

Everything else works except for vertical images which are longer than the height of the horizontal ones.

Regarding the filters, I see that you have these attributes on the filter links. So you want to show all photos by default and remove the filters on the left?

other way around Id like to display all the filters. I just dont want all the images showing up when the page is loaded. Instead i want only the Portraits filtered images to display. IE the first filter in the lost must be used.

To explain it differently:

filter 1:
image 1
image 2

Filter 2:
image 3
image 4

Filter 3:
image 5
image 6

Whats happening when the page is loaded and the viewer scrolls down is images 1-6 are displayed. What i would like is have only the images in filter 1 displayed but still allow the viewer the option of viewing the images in other filtered groups by clicking on the corresponding link.

Ideally id like this to still be in line with the on page layout of the site. So creating separate webpages isn't really an option for each filter/gallery (although this probably would be easier)


Hoping you understand :erm:

 

[Darko]

Set your li to be display:block; margin:0 auto;
Set your img to be max-width: 250px; max-height:250px; height:250px; width:250px; overflow:hidden;

This will force the width and height to be the same, and center the images.

 

[wez1007]

Thanks ill give it a shot.