I'm currently building my website and I'm struggling with my online portfolio for several nights now. I excessively searched the internet, but I did not exactly know how to phrase my problem into words and tried several workarounds that came to my mind.
To view my problem please visit the website beta here: http://dzisign.de/jquerytest/fade.html
I added a gallery to the portfolio section I found here: http://tympanus.net/Development/Stapel/
I like its animation and style but I'd love to add a "third level". By default the stack distributes images onto a grid. The loaded images contain a link so you can click them to get directed to a website. But instead, I want to trigger a new element when I click on the image. Thinking about a div with a larger image and an information area next to it. Unfortunately, I can't get the gallery images to function as buttons. I tried to assign id's to call jquery functions but there's no click recognized. Today I found a possible issue. The grid containing the images seems to always be ontop of the images. So, when I add a function to the whole grid area (see "tp-grid" below) I can click inside the gallery and it triggers my image, just the single images do not work as seperate buttons :/. I hope someone has a hint for me. I try to break the code down into the main areas:
Portfolio area containing the gallery:
<div id="pf-content" >
<div class="container" style="position:absolute; z-index:10;">
<section class="main">
<div class="wrapper">
<div class="topbar">
<span id="close" class="back">←</span>
<h1 style="color:#999">PORTFOLIO</h1><h2 id="name"></h2>
</div>
<ul id="tp-grid" class="tp-grid">
<!-- Matte Paintings -->
<li id="monja" data-pile="MATTE PAINTING">
<span class="tp-info"><span >Monjacity</span></span>
<img src="images/1/monjacity.jpg" />
</li>
</ul>
</div>
<div id="monja-large" style="display:none;z-index:11000;">
<img src="../clients/VFX_DavidLuongWS/highlife_in_monjacity_v16_1k.jpg" width="1100" height="618" />
</div>
</section>
</div>
</div>
Basically I want to trigger the div with the id="monja-large" by clicking the gallery image identified as "monja". Therefore I tried to use this:
$( "#monja").click(function() {
$( "#monja-large" ).toggle( selectedEffect, options, contentFade );
return false;
});
I used such lines of code for all my buttons on the site. The syntax should be ok ^_^. If I am not mistaken the complete html code can be seen through your browser once you are on the website. I just want to stay a little more clean here and not to get too chaotic. You will see that the function is not triggered. This is the part that calls the functions from the Stapel.js plugin for jquery. Not sure if that's useful:
$(function() {
var $grid = $( '#tp-grid' ),
$name = $( '#name' ),
$close = $( '#close' ),
$loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore( $grid ),
stapel = $grid.stapel( {
onLoad : function() {
$loader.remove();
},
onBeforeOpen : function( pileName ) {
$name.html( pileName );
},
onAfterOpen : function( pileName ) {
$close.show();
}
} );
$close.on( 'click', function() {
$close.hide();
$name.empty();
stapel.closePile();
} );
} );
Long story short: do you have any idea how I could access the seperate gallery images and call a function by clicking them? I also desperately tried to push the tp-grid back and pull the images to the front to make them clickable as buttons...no success though.
It's the first time posting here so please tell me if you need more information in case you cannot view the source code on my website. Thank you a thousand times!
Best regards, Dziga
