Currently, I am busy working on my project and I am attempting to achieve this by...
I ideally want everything to be operational through click actions for each individual image, allowing them to have their unique "paper". I am aiming for a hover effect and have decided to implement the toggle blind effect.
I came across a suggestion to utilize CSS Backgrounds for this purpose, in order to seamlessly swap pictures, but I am encountering difficulty in grasping the concept.
To attempt the desired effect, I have tried to create a div that hovers on click, however, I have not achieved the desired outcome.
jQuery(document).ready(function($) {
$('.brownbox_trigger').click(function(event) {
//prevent default 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 match the href of the link
If the brownbox window HTML doesn't exist, create it and insert
(This will only occur the first time)
*/
if ($('#brownbox').length > 0) { // #brownbox exists
//set href as img src value
$('#content').html('<img src="' + image_href + '" />');
//display 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 the page
$('body').append(brownbox);
}
/* Act on the event */
});
//Click anywhere on the page to close the brownbox window
$('#brownbox').live('click', function() {
$('#brownbox').hide();
});
// Our script here
});
UPDATE: I am looking to incorporate SlideDown()-SlideUp() from jQuery(), and I have tried implementing some examples to modify my HTML code, but I am not observing any changes when clicking on an image.
I am trying to achieve the functionality where upon clicking, the hidden image div will reveal text, followed by the jQuery performing the slide. However, post-clicking on my image, no action seems to take place, or at least, the entire picture is sliding down?
Any assistance in resolving this issue would be greatly appreciated. Thank you.