Quantcast

include Shadowbox.setup handleOversize: "drag" to single link

classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

include Shadowbox.setup handleOversize: "drag" to single link

bugfix
hi folks,

i don't know how to include // Shadowbox.setup handleOversize: "drag" // to one single link. in the head section of html sheet is teh definition for // handleOversize: "resize" // an that works fine but i need to make shadowbox working in the dragable way for some single links...

could somebody help me... in "home" of shadowbox-js.com is a script in folowing way:

function setupDemos() {
Shadowbox.setup('a[title="Altaic Warrior - Clipped"]', {
handleOversize: "none"
});
Shadowbox.setup('a[title="Altaic Warrior - Draggable"]', {
handleOversize: "drag"
});
}

but how to include this in a link without using the tiltle=... ?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

arttronics
Here's a method to have the handleOversize Option in a single link. Just include the Function as is in the head section. Have as many custom links as you like, each with there own options and settings.


HEAD Section
     <script type="text/javascript">  // Function ShadowboxRun for Shadowbox.open

          var ShadowboxRun = function(SBContent, SBPlayer, SBTitle, SBWidth, SBHeight, SBOptions){
                Shadowbox.open({
                        content: SBContent,
                         player: SBPlayer,
                           type: SBPlayer,
                          title: SBTitle,
                          width: SBWidth,
                         height: SBHeight,
                        options: SBOptions
                });
          };

     </script>



BODY Section
<a href='javascript:ShadowboxRun("path/Image.jpg", "img", "Title of Image", "640", "480", {modal:false, handleOversize:"drag"});'>Click THIS LINK when browser is SMALLER than image size</a>

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

bugfix
hi attronics and thanks a lot, i'll test this next time but i think do this script affect to the main script in head area like this:

<script type="text/javascript"> Shadowbox.init({ handleOversize: "none", }); </script>
and may i use it in the following manner:

<a href="path/Image.jpg" onclick='javascript:ShadowboxRun({handleOversize:"drag"});'>use handleOversize in a different manner

i can't check this yet... but in a fiew days :)
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

arttronics
The markup mash-up you provided makes no sense whatsoever, I don't even see an idea in it.

It seems the basics of Shadowbox has eluded you.

Please take a look at the Usage and Options page, and once you become familiar with the basics of Shadowbox then dive right into the Home page and review it's source markup for some extra insight.

Once you take the time to try out the example I provided you or better yet... when you take the time to try out your own example before posting them online, then we can move forward in looking for a solution if there's still a problem.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

bugfix
This post was updated on .
hello arttronics,

sorry for bugging you but the thing i want to explain is i do need a link based on html

the example you provided is javascript based an has no functionality without javascript.

but some people don't have javascript like all my colleques at work.

but my problem is different from the issue before, the real question ist how to make one picture in a set dragable and set all others do default ("resize")

i can't help myself
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

arttronics
Shadowbox is written entirely in JavaScript and CSS.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

bugfix
that's right and the link itself works without shadowbox too. the browser supports pictures without js. this is the way shadowbox work and one of the ideas behind. don't make the hompage controlled by js and to make web content accessible to many people as possible.

may be you don't want to understand me or is your goal different from that idea?

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

arttronics
I don't understand you, I'll let someone else help you.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

bugfix
it doesn't matter but thank you for the attempt to help me.

;-)
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

bugfix
the whole description for what i was loocking for is to be found in the usage page... how mortifying. i'll post the code here for anybodys interest:

head section:


Shadowbox.init({
    skipSetup: true
});

window.onload = function() {

    // set up all anchor elements with a "drag" class to work with Shadowbox
    Shadowbox.setup("a.drag", {
                handleOversize: "drag",
   // following any option you want
                continuous: true,
                counterType: "skip",
                counterLimit: 19,
                overlayColor: "#fff",
                overlayOpacity: 0.7
    });
    // set up all anchor elements with a "resize" class to work with Shadowbox
    Shadowbox.setup("a.resize", {
                handleOversize: "resize",
   // following any option you want
                continuous: true,
                counterType: "skip",
                counterLimit: 19,
                overlayColor: "#fff",
                overlayOpacity: 0.7
    });

};


body section:


a class="resize" href="..."
a class="drag" href="..."

and don't forget to download shadowbox including css support...

that's it!
Ben
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

Ben
Hey. This is an old thread, but I like this. It worked for individual images. However, is there a way to make it work selectively on images but keep them part of a continuous group. Like shadowbox[Mixed]?

I tried just adding a class like this, a rel="shadowbox[Mixed];width=617;height=375" class="resize", but it didn't work.  
Ben
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

Ben
This post was updated on .
Just answered my own question. I used this file http://www.shadowbox-js.com/assets/demo.js as my template.

<"script type="text/javascript" src="assets/demo.js"></script">

Here's the custom js I added to demo.js...

    Shadowbox.setup('a[title="Brochure"]', {
        handleOversize: "drag",
        height:  600,
        width: 3864,
        gallery: "gallerOne",
        continuous: true,
        counterType: "skip"
    });
---------------------------------
Here's HTML...

<'head><script type="text/javascript"> Shadowbox.init({ overlayOpacity: 0.8, // setupDemos is defined in assets/demo.js }, setupDemos); </script></head">

<"body>
<"a id="cssbackground-image01" style="width:285px; height:375px;" href="img/image.png" title="Brochure"></a">
</body">

My mistake is that I kept the rel="shadowbox[Mixed];" caller in the html. Take that out.

As long as you create these using a gallery name and attributes, (ex: gallery: "gallerOne"...,) you'll be able to define handleOversize drag, resize, none, options independently to each image by its title name in the continuous gallery.

Note: be aware, the tag markup in my above examples has extra quotes.

<'head>  <"body> etc...

Ben
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: include Shadowbox.setup handleOversize: "drag" to single link

Ben
Or one could also just leave everything responsive, and use a zoom toggle to see the selected item being viewed in drag mode. This worked.

http://code.pandaking.co.uk/sb-expand/
Loading...