Get movingboxes working with lightbox

CSS-Tricks / MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.

http://css-tricks.github.io/MovingBoxes/

GNU Lesser General Public License v3.0

280 stars 147 forks source link

Get movingboxes working with lightbox #63

Closed kostas-mi closed 12 years ago

kostas-mi commented 12 years ago

Hi, i've tried almost every solution out there (jquery is conflicting with the prototype gallery) but still they won't work together. More specifically i want the slideshow image to open in a lightbox window, but i can't seem to be able to combine these two nice scripts. :(

Any ideas on how i can do that? :/

Mottie commented 12 years ago

Hi kostas-mi!

Did you set the jQuery.noConflict(); function (ref)?

I really haven't used Mootools so I won't be able to check that code. But it would help if you shared some code... I have no idea what lightbox you are using and why mix Mootools and jQuery?

kostas-mi commented 12 years ago

yeah, i tried this noconflict thingie and either i am not doing this right, or it just needs something differnet. :P

anyway here's my header: when i comment out the jquery library lightbox works. when i don't they don't work together (one of them works each time, and more specifically the one i call last)

<head>

<!--Required script for moving boxes -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/jquery.movingboxes.js"></script>
        <!-- moving boxes -->
<!-- LIGHTBOX -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!-- LIGHTBOX -->       

<!-- Required CSS for the slider -->
<link href="css/movingboxes.css" media="screen" rel="stylesheet">

    <!-- Demo only moving boxes-->
    <link href="demo/demo.css" media="screen" rel="stylesheet">
    <script src="demo/demo.js"></script>
    <style>
        /* Overall & panel width defined using css in MovingBoxes version 2.2.2+ */
        ul#slider-one { width: 300px; }
        ul#slider-one > li { width: 150px; }
        div#slider-two { width: 480px; }
        div#slider-two > div { width: 360px; }
    </style>
</head>

gah, not sure how i send code in this form. is there a specific tag like [code] ?

Mottie commented 12 years ago

When you post code you can:

Indent all of the code with four spaces (no-syntax hilighting)
```
// I haz code
```
Use a back tick ` around code for inline code

this is inline code, aren't I special?
Or the grandaddy of methods that adds syntax hilighting by wrapping it in three back ticks with the type of code you are using, like for html use ``` html (no space), etc.
```
```html

```

Mottie commented 12 years ago

And now on to the problem. When you use the jQuery.noConflict(); it is best to add it immediately after loading the script:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>jQuery.noConflict();</script>
<script src="js/jquery.movingboxes.js"></script>

then when you call jQuery, don't use $ but use the entire name jQuery. Or if you like short names, change the code above to something like this:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>var $jq = jQuery.noConflict();</script>
<script src="js/jquery.movingboxes.js"></script>

Now, when using the document ready function, you can do this:

// same as `jQuery(document).ready(function(){`
// or use $jq(function(){ if you assigned a variable using the no conflict
jQuery(function($){
  $('#boxes').movingBoxes();
});

Oh, and don't use my demo.js file because it only uses $ which is why there is a conflict with prototype

Mottie commented 12 years ago

I'm guessing the problem has been resolved so I'm going to close this issue. If you still need help or have further implementation issues, please feel free to email me directly on my gmail account; username is wowmotty. I would like to keep this issue section for bug reports and enhancement requests. Thanks!

marcinsdance commented 12 years ago

Uff, thanks Mottie, this worked for me.