I am working on my project and I am trying to make this
.
I want to make everything work on click for every image (so every image would have they own paper), need this to hover and I would like to use the toggle blind effect.
I was reading that it would be wise to use CSS Backgrounds on this, so I can swap pictures but I can not understand it.
I have taken some code to make a div who will hover on click, but I did not made desired effect.
jQuery(document).ready(function($) {
$('.brownbox_trigger').click(function(event) {
//prevent deafault action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
/*
If the brownbox window HTML already exists in document,
change the img src to mach the href of whatever link wac c
If the brownbox window HTML doesn't exists, create it and insert
(This will only happen the first time around)
*/
if ($('#brownbox').length > 0) { // #brownbox exists
//place href as img src value
$('#content').html('<img src="' + image_href + '" />');
//show brownbox window
$('#brownbox').show();
}
else {
//create HTML markup for brownbox window
var brownbox =
'<div id="brownbox">' +
'<p>Click to close</p>' +
'<div id="content">' +
'<img src="' + image_href + '" />' +
'</div>' +
'</div>';
//insert brownbox into page
$('body').append(brownbox);
}
/* Act on the event */
});
//Click enywhere on the page to get rid of the brownbox window
$('#brownbox').live('click', function() {
$('#brownbox').hide();
});
// Our script here
});
EDIT: I want to use SlideDown()-SlideUp() from jQuery(), so I have used some examples to make changes to mine HTML, but nothing is happening when I click over an image.
I want to be able to click on it, and the hidden image div will appear containing text, then the jQuery will do the slide. Problem is that after I click on mine image nothing is happening, or as I see it, the whole picture is sliding down?
Can you help me over come this, thank you.
