treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Gallery Thumbs off placement...

  • The Gallery Thumbnails are off set and when I hit the menu for gallery a second time they line up correctly... How/Can this issue get fixed?

    Also if your refreash the page it is off set again...

    The URL is http://tuzart.com/deluca/pages/gallery5.htm

    The gallery is "FancyGallery"

    Thank you in advance for any Help on this issue...

  • You can try setting width and height on the thumbnail img tags, maybe when fancygallery runs before the images are loaded it reads their width and height as 0 and tries to position them in the middle of the gallery boxes... not sure if that's your problem though, didn't really dig into it.

  • I'll give it a look and see... Thank You...

  • You have inline style on your images:

    <img ... style="left: 125px; top: 50px; opacity: 0.6;">
    
  • I tried the style's but didn't work it didn't do anything at all... It must be in the jquery/JS

  • adding the <img... Style...> didn't work... I did find out that line 17 in the "jquery-fancygallery-1.1.min.js" file is an area w/an area that manipulates the boxes and colour and sizes... but can not find the placement issues...

    Array.prototype.shuffle=function(){for(var p,n,l=0;l<this.length;l++){n=Math.floor(Math.random()*this.length);p=this[l];this[l]=this[n];this[n]=p}};c.fn.fancygallery.defaults={width:720,height:600,thumbWidth:250,thumbHeight:100,backgroundColor:"#BFBFBF",borderThickness:3,shadowOffset:-20,columns:2,columnOffset:95,rowOffset:85,thumbOpacity:0.6,titleHeight:40,imagesPerPage:6,textFadeDirection:"normal",boxOptions:{}}})(jQuery);

    I played with this file but still can not find the area of placement...

    Not Solved yet...

  • Reconsider the way you're approaching this problem. You should not depend on JavaScript to create DOM elements and apply correct styles. You need to separate each into its own layer. HTML = Mark up & Content, CSS = Presentation, and JS = Interaction (Altering CSS and Adding HTML is OK, but after correct design has been rendered).

    This way you would know exactly how each element in your layout would behave.

    The java script is adding inline styles. It looks like the plug-in is calculating surrounding elements and applying styles.

    or

    Fancybox.

  • I am trying to get support from Fancybox.... I believe they are out till sometime in March... Hopefully they will resolve this issue...

    Thank You for everyones help on this...