Shadowbox prevent opening, then allow opening?

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Shadowbox prevent opening, then allow opening?

Fshequin
Greetings,

I have an accordion type image slideshow that loads images into div panels which are toggled to expand there accordion panels, the images are shown in both an expanded and in the contracted Panels.

http://www.shequine.com/ccs/exhibitions/francesc-ruiz-coverage/

My problem is that shadowBox opens when the images are contracted and I need to prevent this but allow shadowbox to open the images when they are expanded in their respective panels.

My initial thoughts where to try and move the shadowbox open function to the double-click event, but I'm not sure that is the smartest way to fix my problem. What I'd prefer to do is simply disable the click event when they are contracted....and re enable the click event when the slides are expanded.

Does anyone have any ideas, best solutions to solve my problem?

Thanks in advance for any help provided.

Best, Fred

Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox prevent opening, then allow opening?

HenzeBerkheij
I think you should go the javascript way to load in the images.

An nonexpanded div than just has tthe functionality to let the div grow. when you click on it, you let it grow, and when you click on it again, you can remember if it's expanded, if yes, you call Shadowbox.open(Shadowbox.gallery[ID]) Where ID is the number of the position in the array of objects (assuming my brains remember the correct usage)

you should not copy and paste what i just have said..but try to point your nose in this direction and find out the code for your self, it's really simple actually ;)
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox prevent opening, then allow opening?

Fshequin
Thanks for the response :-) 

But at this point all the images already have the click event tied to the un-expanded frames. As well as the expanded ones. Which leads me to believe that, calling shadowbox open, through javascrpt on the expanded frame as redudant. What I think I need is to somehow build the links but not register them to the unexpanded frames until the frames are expanded? 

But i'll try your suggestion and see..

Thanks again!

Sent from my iPad

On Apr 11, 2011, at 3:17 AM, "[hidden email] [via Shadowbox.js]"<[hidden email]> wrote:

I think you should go the javascript way to load in the images.

An nonexpanded div than just has tthe functionality to let the div grow. when you click on it, you let it grow, and when you click on it again, you can remember if it's expanded, if yes, you call Shadowbox.open(Shadowbox.gallery[ID]) Where ID is the number of the position in the array of objects (assuming my brains remember the correct usage)

you should not copy and paste what i just have said..but try to point your nose in this direction and find out the code for your self, it's really simple actually ;)


If you reply to this email, your message will be added to the discussion below:
http://shadowbox-js.1309102.n2.nabble.com/Shadowbox-prevent-opening-then-allow-opening-tp6259573p6260440.html
To unsubscribe from Shadowbox prevent opening, then allow opening?, click here.
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox prevent opening, then allow opening?

HenzeBerkheij
well..i had an other thought: you could use the onOpen option with a global variable where you can store an value with the name of the current open div.

onOpen: function(oEvent){
    tElement = (oEvent.target || oEvent.srcElement);
    if(tElement != openPicDiv){
        return false;
    }
}

when onOpen returns false, the shadowbox will not open...much cleaner and faster
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox prevent opening, then allow opening?

Fred Shequine
all seemed like good ideas.....and I liked the simplicity of disabling onOpen....and it works sort of but the links are still there and as such shadowbox does not open, but the image link is still a registered click handler so the image opens...in it's own window....which is not the effect I wanted. so back to the drawing board on this.

I also tried disabling the default click action of the hyper link, by using jquery to locate the links,
 By a comon ID and have them disable default if they were contained within the hidden divs. But that did not work. The images still open in shadowbox.

I'm now leaning towards some variation on setting up the links on the fly and destroying them and then rebuilding them....as needed. But that is pretty difficult to accomplish in a logical fashion. Without limiting shadowbox to single images. I have a requirement to include all images in shadowbox as a gallery.

Again here's the link to my page:

http://www.shequine.com/ccs/exhibitions/francesc-ruiz-coverage/

All code and source should be visible through chrome developer tools or firebug.

Thanks again for your ideas and assistance.....

Best, Fred Shequine
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox prevent opening, then allow opening?

HenzeBerkheij
well, if i do it, it just works..but then again..i went completely the javascript approach...

it should work for as far as i know, are you sure you put the code on the right place?
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox prevent opening, then allow opening?

Fshequin
Well....first off thanks for helping me dig into this! :)

Here is the partial HTML & PHP code from my page....that is loading the images (code incomplete here, but works on my page beautifully):
------------------------------------------------------------------------------------------------------
                                        <?php foreach($imagedata as $imageinfo) {
                                        global $source, $desc, $credit;
                                        $source = $url . "/" . $imageinfo->path . "/" . $imageinfo->filename;
                                        $desc = $imageinfo->description;
                                        $credit = $imageinfo->field_value;
                                          ?>
                                        <div class="toggle hidden" data="<?php echo $source; ?>">
                                                <div class="expand hidden">
                                                        <img src="<?php bloginfo('template_directory'); ?>/img/icon-slide_expand.gif" width="20" height="20" />
                                                </div>
                                                <div class="caption hidden">
                                                        <p><?php echo $desc; ?> <br />
                                                        Credit: <?php echo $credit ?> </p>
                                                </div>
                                                <div class="image"><a id="slide_link" rel="shadowbox[slideshow];title=<span><?php echo $desc; ?><br />photo credit: <?php echo $credit; ?>" href="<?php echo $source; ?>"><img src="<?php echo $source; ?>" width="750px"/>
-----------------------------------------------------------------------------------------------------

And here is the javascript that is acting upon the loaded images for the slideshow:

-----------------------------------------------------------------------------------------------------
<script type="text/javascript" charset="utf-8"> /* Slide Toggle Loop Each slide container starts off hidden; once loaded, loop over each, and figure out the maximum width. */ var toggle_count = $('div.content-header-slideshow div.toggle').length; var toggle_width_minor = 40; var toggle_width_major = 850-(toggle_count*toggle_width_minor); var slide_Toggle = 250; var slide_Caption = 150; $('div.content-header-slideshow div.toggle').each( function(index) { toggle_width_start = toggle_width_minor; if(index==0) { toggle_width_start = toggle_width_major; // first slide starts in full view } $(this).css({'width':toggle_width_start, 'display':'none'}) .delay((index+1)*slide_Toggle) .fadeIn(500, function() { if(index==0) { $(this).children('.caption').slideDown( slide_Caption ); $(this).children('.expand').slideDown( slide_Caption ); $(this).addClass('showing'); } }) .removeClass('hidden'); $(this).click( function() { // expand slides pop up here }); }); /* Slide Toggle Functions First, close the open/showing slide; Then, open/expand the one clicked. These should run simultaneously */ $('div.toggle:not(.showing)').click( function(event) { // ':not(.showing)' is not working properly if( !$(this).hasClass('showing') ) { $('div.content-header-slideshow div.showing') .children('.expand') .slideUp( slide_Caption, function() { }); $('div.content-header-slideshow div.showing') .children('.caption') .slideUp( slide_Caption, function() { $('div.content-header-slideshow div.showing').animate({ // contract the currently expanded slide width : '-='+(toggle_width_major-toggle_width_minor), }, slide_Toggle, function() { $(this).removeClass('showing'); } ); }); // expand the minor width clicked slide to the major width $(this).delay( slide_Caption ).animate({ width : '+='+(toggle_width_major-toggle_width_minor), }, slide_Toggle, function() { $(this).children('.caption, .expand').slideDown(slide_Caption ); $(this).addClass('showing'); } ); } }); </script>-----------------------------------------------------------------------------------------------------

I think you might be right that I don't know where to place the code you have suggested....so above is the what I'm working with....which I assume you had a look at from the page and again here is the page link:

http://www.shequine.com/ccs/exhibitions/francesc-ruiz-coverage/

Best, Fred Shequine