Can someone explain how this CSS/Javascript/Iframe works?

3 replies
  • WEB DESIGN
  • |
I am trying to learn some new web design tricks and I came across this gallery on this web page: jochemgugelot.nl

I have no idea how the transition from 'Work' to individual galleries works.

In source code, I believe this is the relevant section:
<a href="#" onclick="javascriptOpenWork('271','serie','iceland ')">
In animations.js file, here is the function openWork:
function openWork(parameters,type,title) {

work = -1;
busy = true;
$('#work').css('display','inline');
$('#backgrounds_buttons').css('display','none');

$('#work').animate({height: '100%'},500, 'swing',function () {

$('#bg_grid').css('display','none');
$('#backgrounds').css('display','none');
$('#black_bar').css('display','none');



$("#work_loader").css('display','inline');


$('#work').load(root+'content_'+'work_details/id='+parameters+'/'+title+'/', {page:'work_details',paramsarameters,type:type}, function() {

busy = false;
setTimeout("nextWork();",1);

});


// Add mousewheel functionality to content div
$('#work').mousewheel(
function(event, delta, deltaX, deltaY) {
if (delta<0) nextWork();
if (delta>0) previousWork();

}
&nbsp;


});

}
But when I try to recreate anything remotely similar, my page goes dark and transition to the gallery never happens.

Can someone give me some tips, direction, to set me on the right path?

What is puzzling to me is that even if it is in iframe, I would think that going straight to http://www.jochemgugelot.nl/content_...d=271/iceland/ would yield the actual gallery, without the rest of the page design.

But instead, that link ends in a info box that says "There are no photos in this serie (yet)."


Can anyone shed some light on how something like this works?
#explain #works
  • Profile picture of the author dc_publius
    Also, are little incentive payments allowed on this forum? If they are, I'll paypal whoever helps me figure this out $20 and if they are looking for CSS/jquery/design jobs I might have something for them next month.
    {{ DiscussionBoard.errors[3724324].message }}
  • Profile picture of the author oknoorap
    don't missing div with id like

    #work ,

    please check your html, you may be don't have a div with id work, backgrounds_buttons, black_bar, and bg_grid.

    try to copy-paste html same as source.
    {{ DiscussionBoard.errors[3725777].message }}
    • Profile picture of the author robertwhitis
      All of those css entries are referring to a CSS style, and probably a stylesheet(s), and you need the stylesheet(s) to make this script work. That is the reason your page is going dark and the display is not working.

      If you downloaded that animations.js file, go back to the directory you downloaded it from, and look for .css files instead of animations.js, for instance, style.css. Actually, look in the resources/css/style.css file.

      If you come up empty handed, Google a program called HTTrack (it's free) and plugin the web address you referenced in your post, and see if you can't download the CSS file that way.

      I'd be happy to help you in the future, and I hope this works for you.

      Good Luck!

      Robert
      {{ DiscussionBoard.errors[3737148].message }}

Trending Topics