rosgar.wordpress.com

arts and etc..etc..

About

Hi! It’s me, Ross, you’re newest blogger in town. Hehe. I’ll update this later… still thinking what words to put here.

Advertisements

14 thoughts on “About

  1. Hi Ross,

    i have looked through your tutorial here, and i like how browsercompatible it is! great job!

    https://rosgar.wordpress.com/2008/07/01/squared-thumbnails-in-modxs-maxigallery-using-css/

    However, I am seriously challenged to make a frame with a border around the thumbnails. Just like here in the first example gallery on top:

    http://www.rutschmann.biz/ressources/php/thumbnails-q-css/

    do you know how to enhance your already good working solution to have borders and frames around the images?

    thanks
    Alex

  2. Lol. I’m looking my post about MODx and you posted here. Hmm, haven’t tried it. Anyway, this code will do the trick.

    Put this code at the bottom of your CSS,

    ul.thumbs li {
    border:1px solid #C3C3C3;
    padding:5px;
    width:128px;
    height: 128px;
    }

    The height and width depends on how big your thumbnails.

    or much simpler, replace the whole code of ‘ul.thumbs li’ with this

    ul.thumbs li {
    display:block;
    float:left;
    list-style-image:none !important;
    list-style-position:outside;
    list-style-type:none;
    margin:0px 0px 0pt !important;
    border:1px solid #C3C3C3;
    padding:5px;
    width:128px; /* you can change this setting */
    height: 128px; /* you can change this setting */
    }
    
  3. Hmmm…, just saw your site. OK, add this code before ‘.masker li’ in your CSS style

    .thumbscontainer .thumbs li img {
    display:block; width:128px; height:128px; overflow:hidden;
    }

    I just noticed that you don’t have spaces between; if you want, check your ‘ul.thumbs li’ CSS.

    Look for this line

    margin:0px 0px 0 !important;

    change to this

    margin:8px 4px 0 !important;

    If you want to center your thumbnails, you my add ‘margin-left: 90px; in your ‘.thumbscontainer’

    .thumbscontainer {
    float:left;
    margin-bottom:20px;
    margin-left:90px;
    }

    It’s only a quick fix but haven’t tested to other browsers.

  4. hello,

    http://www.positivegaming.com/index.php?id=118

    it is getting better now, but now the complete images are shaped into squares from their original proportions.

    i have created a demonstration image of two possibilities how I would like to handle it:

    1) visible square taken from centre of image, and masked with border and frame:
    EXAMPLE 1 Image

    2) original image not modified, and Frame with border built around it:
    EXAMPLE 2 Image

    May I ask you again for your help?

    At the same time I need to tell you, that your website is almost the only resource for bringing a maxigallery into a proper shape through css & tpl. Thanks so much!

    Alex

  5. Ooops! your images are shaped from their original proportions. Sorry. OK, back-up your CSS, then replace this code (for your gallery CSS), but there’s a catch… I’m using ‘outline’ code.

    From the look of your given samples. Here’s what I did.

    Just replace this…

    .thumbscontainer {
    float:left;
    margin-bottom:20px;
    margin-left:90px;/* values can be change to center your thumbnails */
    }

    .masker li{
    float:left;
    height:128px;
    overflow: hidden;
    padding:0px;
    width:128px;
    border: 5px solid #ffffff;
    outline-style: solid;
    outline-width: thin;
    outline-color: #C3C3C3;
    }

    .masker a img {
    border:medium none;
    position: relative; top: -10px; left: -10px; /* you can change this how far your image you want to show */
    }
    .masker a:hover img {
    opacity:0.7;
    }
    .masker {
    margin-bottom:-5px;
    width:450px;
    }
    ul.thumbs li {
    display:block;
    float:left;
    list-style-image:none !important;
    list-style-position:outside;
    list-style-type:none;
    margin:12px 6px 0pt !important;
    }
    ul.thumbs {
    clear:both;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0pt;
    padding:0pt;
    }
    ul.thumbs li img {
    border:medium none;
    margin:0pt !important;
    }
    ul.thumbs li a {
    background:transparent none repeat scroll 0% !important;
    border:0pt none;
    text-decoration:none;
    }
    ul.thumbs li p {
    overflow:hidden;
    }
    .thumbs .clearboth {
    clear:both;
    }

  6. okay, thank you. we are on the right track now.

    http://www.positivegaming.com/index.php?id=118

    it now looks perfect in firefox3, Safari and opera9, but does not mask the images anymore in IE7. I would suspect its similar in IE6 too.

    I think thats the negative side of using “outline”, as it is not compatible to IE.

    Would it be an option to add another div layer for making the border with {border: 1px;} ?

    Thanks again
    Alex

  7. hi ross,

    i will now use your original method of squared thumbnails without any frames or borders around the thumbnails, which seemed to work the best out of all possibilities.

    Thanks again for looking into it, seems you couldnt find another way.

    kind rgds an thank you!
    Alex

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: