Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question I need help identifying some code.

    I need assistance identifying the lines of code that generate the cascading image effect as seen here. I am trying to achieve a similar effect, but I am currently unable to work out the logic behind it.

    Here is the script that is running on that web page.

    If it helps at all, the title of the div where the effect takes place is <div id="Mosaic" style="position: relative; width: 100%; height: 1060px;">

    Also the images seem to be floated to the left normally(without css), but after the first row the images are loaded depending on which one is the next closest to the top border of the "Mosaic" div(ex. attached).
    Attached Thumbnails Attached Thumbnails I need help identifying some code.-mosaic-example.jpg  

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Well, quite frankly I can't find the code where they are doing that, but it doesn't look all that hard to do.

    You make all the columns the same width. You plop an image into each column (and maybe randomly let an image take up two columns), sizing the image to the width of the column and letting the browser size the height automatically. Then you go find the shortest height among the columns and put another image into that one. You keep track of the height of each *column* to make finding the shortest column easier. Randomly, if two adjacent columns are within X pixels of the same height (X is a small number), you plop in a double column image.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, quite frankly I can't find the code where they are doing that, but it doesn't look all that hard to do.

    You make all the columns the same width. You plop an image into each column (and maybe randomly let an image take up two columns), sizing the image to the width of the column and letting the browser size the height automatically. Then you go find the shortest height among the columns and put another image into that one. You keep track of the height of each *column* to make finding the shortest column easier. Randomly, if two adjacent columns are within X pixels of the same height (X is a small number), you plop in a double column image.
    Thank you for the suggestion. I've found just about every script on that page except the one I want. I'm starting to think that it's probably a flash effect.
    Code:
    var CONST = 
    	{
    		MOS_ID			:	"Mosaic",
    		MOS_ELEM		: 	document.getElementById("Mosaic"),
    		BODY			: 	navigator.userAgent.indexOf("Safari") != -1	?	"body"	:	"html",
    		KEY				:	"r2s1nCZyRoqfdo0RvgLd61twPioPITgvsJ6ay7cFkqC8N3ttAr",
    		BASE_URL		: 	"http://"+location.host+location.pathname,
    		TEST			: 	location.host == "tmv.proto.jp"	?	false	: 	true,
    		ENABLE_FLASH	: 	swfobject.hasFlashPlayerVersion("10.0")
    	}

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Well, it may be, but I don't see why it needs to be. It really doesn't look like it would be all that hard to code in ordinary JS (no jQuery, even) if you had the thumbnail images all ready to go.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,183
    Thanks
    15
    Thanked 253 Times in 253 Posts
    I checked it out in Firefox using right click, select all, and right click again and view selection source. That's the only way you will see the relevant code. You have to use FF, it's the only browser that lets you
    do that. It's done with javascript, some other app resizes the images

    to thumbnails, and makes up a javascript array with the image information

    but javascript uses that information to lay down the code. The thumbs

    are absolutely positioned so all that info has to be calculated by whatever

    makes the thumbs. Even the div the thumbs go in and the link to the JS array are entered by JS.

  • #6
    New Coder
    Join Date
    Aug 2012
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    I checked it out in Firefox using right click, select all, and right click again and view selection source. That's the only way you will see the relevant code. You have to use FF, it's the only browser that lets you
    do that. It's done with javascript, some other app resizes the images

    to thumbnails, and makes up a javascript array with the image information

    but javascript uses that information to lay down the code. The thumbs

    are absolutely positioned so all that info has to be calculated by whatever

    makes the thumbs. Even the div the thumbs go in and the link to the JS array are entered by JS.
    If you are using FF then you can just use the add-on "Firebug". It is far more useful for looking at the code running a website.

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,183
    Thanks
    15
    Thanked 253 Times in 253 Posts
    Quote Originally Posted by Ax3l View Post
    If you are using FF then you can just use the add-on "Firebug". It is far more useful for looking at the code running a website.
    I have that too, but for looking at all of the page, including parts that are built by JS, the 'view selection source' works best. It also works if you want to copy any of the source.

  • #8
    New Coder
    Join Date
    Aug 2012
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    I have that too, but for looking at all of the page, including parts that are built by JS, the 'view selection source' works best. It also works if you want to copy any of the source.
    Thank you for the tip. More to the point, what i'm looking for is how to code the effect that causes the thumbnails to cascade down the screen combine with the infinite scroll.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,536
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Well, I told you how to make the images cascade down the screen. So the only question is the "infinite" (not infinite, of course, but I know what you mean) scroll. For that, all you have to do is monitor the scrollTop and scrollHeight of the <body> and when you discover the user has scrolled down you tack on more images, to the height of the window.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    take a look at

    automatic magazine layout

    its an article on a list apart

    its a PHP implementation, but it might help
    <DmncAtrny> I will write on a huge cement block "BY ACCEPTING THIS BRICK THROUGH YOUR WINDOW, YOU ACCEPT IT AS IS AND AGREE TO MY DISCLAIMER OF ALL WARRANTIES, EXPRESS OR IMPLIED, AS WELL AS DISCLAIMERS OF ALL LIABILITY, DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL, THAT MAY ARISE FROM THE INSTALLATION OF THIS BRICK INTO YOUR BUILDING."
    <DmncAtrny> And then hurl it through the window of a Sony officer
    <DmncAtrny> and run like hell

    Portfolio, Tutorials - http://www.nomanic.biz/

  • #11
    New Coder
    Join Date
    Aug 2012
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, it may be, but I don't see why it needs to be. It really doesn't look like it would be all that hard to code in ordinary JS (no jQuery, even) if you had the thumbnail images all ready to go.
    You might be right.

    Quote Originally Posted by Old Pendant View Post
    Well, I told you how to make the images cascade down the screen. So the only question is the "infinite" (not infinite, of course, but I know what you mean) scroll. For that, all you have to do is monitor the scrollTop and scrollHeight of the <body> and when you discover the user has scrolled down you tack on more images, to the height of the window.
    Thank you.
    Last edited by Ax3l; 08-29-2012 at 12:46 PM. Reason: Didn't want to double post.

  • #12
    New Coder
    Join Date
    Aug 2012
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you guys for the help and suggestions. I was making this far more difficult than it needed to be. Each image is given an id in the format "i_#" which determines the image's position in the grid and when the image loads. When I pin down the load effect I think I'll have all that I need.

    Also, I'd like a mod to change the first website link in the op to this, as the images displayed on the main have become inappropriate.

    Thank you.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •