- Screen name: sanjit.saha
sanjit.saha's Profile
2 Posts
5 Responses
0
Followers
Show:
- Expanded view
- List view
Private Message
- My problem is that I'm trying to combine fancybox into quicksand on a page here is the code I'm using and all it does is opens up the image on a new page instead of a floating page here is a code snippet<section id="container"><section id="work" class="clearfix"><ul id="stage"><li data-tags="Community"><div class="animate" data-id="id-1" data-alpha="wd" data-beta="bb"><a class="thumb" name="#" href="assets/photos/image2.jpg" title="Title #0"><img src="assets/img/shots/1.jpg" alt="Illustration" /></li><li data-tags="Clean Up,Community"><div class="animate" data-id="id-2" data-alpha="wd" data-beta="bb">it does continue but I think you can see what I'm trying to do with the abovethanks in advance
- Hi recently I saw a jquery/mootools lightbox clone called Bumpbox I want to add this to my portfolio page as I can then pull in websites, swf's, pdf's, audio straight into the page.Below is what I'm supposed to do
1. Copy the files
Copy the files you have found in the RAR file to the root of your website ( usually htdocs/ ).
2. Edit your document
After copying the files, open the website you wish to edit and add the following lines right before the closing body tag ( </body> ):
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/bumpbox.js"></script>
If you intent to view FLV and SWF files, add the following line:<script type="text/javascript" src="js/flowplayer.min.js"></script>
3. Choosing a class name
Now choose and apply a class name to all links that should trigger bumpbox. In the end, your links should look like this, here we use "bump" as the class name:
<a href="http://www.artviper.de" class="bump">SEO</a>
Note: Grouping can be achieved by using the same class name for those elements that should be grouped.
4. Define a size for bumpbox
Each link can have a different size, matching the object size you wish to show. For that, we take the already used link from #3 and add the rel tag, which is used to determine the bumpbox size:
<a href="http://www.artviper.de" class="bump" rel="800-600">SEO</a>
As you can see, we added rel="800-600", so the resulting bumpbox will be 800 x 600 pixels wide.
Note: If you add a title to your <a> tag, it will be displayed right below the main content bumpbox.
5. Activating Bumpbox
To activate bumpbox, we need to add (at least) the following script call:
<script type="text/javascript"> doBump('.bump'); </script>
This enables bumpbox, and you are now ready to use it for the first time. Yet, there are a lot more options you can define to adjust the appearance of bumpbox to your liking.
Continued on the right side...
6. Setting up options
Options available
name
Class name for bumpbox objects, note the dot in front of the class name itself
inSpeed
Effect speed to show bumpbox ( in ms )
outSpeed
Effect speed to remove bumpbox ( in ms )
boxColor
Hex color of bumpbox itself, omit #
backColor
Hex color of the background overlay, omit #
bgOpacity
Opacity of the background overlay, values 0 - 1
bRadius
Border radius of the bumpbox client window in px
borderWeight
Border weight of the bumpbox client window
borderColor
Hex color of the bumpbox client window, omit #
boxShadowSize
Shadow spread size in px
boxShadowColor
Hex color of bumpbox shadow, omit #
iconSet
Choose from 4 predefined icon sets
effectsIn
Transition used for appearing see Transitions
effectsOut
Transition used for disappearing - see Transitions
bgImage
Background image to be used
bgPosition
Background position
bgRepeat
Background repeat
Using a fully customized bumpbox:
doBump( '.bump',750, 500, '111', '900', '0.8', 5, 1 ,'333', 15,'000', 4,
Fx.Transitions.Bounce.EaseOut,
Fx.Transitions.Bounce.EaseOut,
'images/demo_bg_bumpbox.png',
'top left',
'repeat-x' );Does it work not yet.
I must be thick but I followed the instructions but I must be putting the code in the wrong place has anyone have any Ideas let me know
Thanks
Sanj
- «Prev
- Next »
Moderate user : sanjit.saha