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: In animations.js file, here is the function openWork: 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?
That's jQuery. Firstly, do you have the library link? <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> Code (markup): It's like an iframe, but they use the jQuery load() function to put content inside the #work div. The link in your post loads this content: http://www.jochemgugelot.nl/content_work_details/id=271/iceland/
It looks like it is http://sizzlejs.com/ 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_work_details/id=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)."
There is a link to the jQuery library, but I can't find anything for SizzleJS. That would be true if it was an iframe. In this case, the content is dumped directly into the main page, so it can't be a complete web page.
I guess this is more interesting question than I initially thought. $20 to the person that figures out how this transition/gallery works and can explain it to me - and possibly some freelance work for the right person who can do design/jquery/CSS.
thats actually not that complicated you found the right piece of code $('#work').animate({height: '100%'},500, 'swing',function () { Code (markup): this line displays the galery div with a "swing", the 4 lines after that hides some of divs of the "main" page ('#work').load(root+'content_'+'work_details/id='+parameters+'/'+title+'/', {page:'work_details',paramsarameters,type:type}, function() {busy = false;setTimeout("nextWork();",1);}); Code (markup): that line loads the photos of that specific galery. i assume the server populates the data not from the url but rather from the POST data which are send as second parameter bye the $.load function {page:'work_details',paramsarameters,type:type} a populated page from the server looks like that for example http://shorttext.com/v2215kpufn setTimeout("nextWork();",1); Code (markup): this line at the end starts the automatic picture change sorry for my bad English ,i'm no native speaker <.
Here's the flow as far I can follow it. All the action takes place in animation.js Clicking a bar link calls the changeContent() function, which calls the showBar() function that has this line: $('#content').load(root+'content_'+pageName+'/', {page:pageName,params:parameters} Code (markup): These are the content pages for each main link: changeContent('services'); [url]http://www.jochemgugelot.nl/content_services/[/url] changeContent('work'); [url]http://www.jochemgugelot.nl/content_work/[/url] changeContent('about'); [url]http://www.jochemgugelot.nl/content_about/[/url] changeContent('contact'); [url]http://www.jochemgugelot.nl/content_contact/[/url] Code (markup): That function also sends data to the server, but the pages still load without it. There is also another loading function, called openWork(). As kg-web pointed out, this is the line that loads the content: $('#work').load(root+'content_'+'work_details/id='+parameters+'/'+title+'/', {page:'work_details',params:parameters,type:type} Code (markup): While the data did not matter in showBar(), it seems to matter in this function. At this point, I gave up because nothing would load properly. Mate, you're better off choosing something simpler. Why does a gallery need to be that damn convoluted?
I guess this is the part that has me stuck. If I wanted to avoid the POST data, where could I stick the populated page for it to be found? For <a href="#" onclick="openWork('31','work','commissioned')"> I tried putting the gallery array at root+/work_details/id=31/commissioned/index.html as well as root+work_details and root+work_details.html But the div doesn't get found? I guess what it comes down to is that I'm not sure how to read: ('#work').load(root+'content_'+'work_details/id='+parameters+'/'+title+'/', {page:'work_details',paramsarameters,type:type}, function() {busy = false;setTimeout("nextWork();",1);}); Code (markup):
The "content_" is missing from your links. Try this, or change the function to suit your URLs. SITE ROOT/content_work_details/id=31/commissioned/ ('#work').load(root+'content_'+'work_details/id='+parameters+'/'+title+'/', {page:'work_details',paramsarameters,type:type}, function() {busy = false;setTimeout("nextWork();",1);}); Code (markup): - root is defined elsewhere as "/" - load content into #word div from /content_work_details/id=PARAMETERS/TITLE/ - send data: page=work_details¶ms=PARAMTERS&type=TITLE - run a callback function when finished loading. - the callback is just a timeout that starts the gallery looping I think the actual link doesn't matter much here because of redirection. What counts is the data being sent along with it. There is probably a hidden script building the gallery content with that data. I don't know, it's all pretty confusing.
I copy&pasted the important code parts out of the script that you can oversee it better just go to http://teststation.kg-web.de/1532/ the gallery which is imported in this example is at http://teststation.kg-web.de/1532/content_31 I think it's so complicated on the original page to include googles page ranking and that theres a strange back-end which has no mod_rewrite but rather some sort of POST data content builder - KG