Implement nivoslider and jqueryui.com/demos/dialog on one page - jquery-ui

Question

I want to implement Nivoslider for a slideshow as well as jQueryUI pop-op boxes. When I implement them as separate entities, then the pop-up boxes stop working as they should.
Is there a way to implement them together, or is there a fatal error?
By the way, I am a complete noob when it comes to js - please be kind and spell things out for me please :D
This is the code for Nivoslider:
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 2000, // Slide transition speed
pauseTime: 6000, // How long each slide will show
});
});
</script>
and this is the code for jQuery UI pop-up box:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>

Answer 1

My implementation based on the demo script provided with Nivo Slider, just add in jquery UI and use this code. It stores the slider information and re-creates the slider each time the dialog is opened.
HTML Code
<div id="wrapper">
dev7studios
<button id="btnTestMe">Open Slideshow</button>
</div>
<div id="dlgTestMe">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
JQuery Code
$('#btnTestMe').click(function(e){
e.preventDefault();
$('#dlgTestMe').dialog({
open: function(){
var data = $('.slider-wrapper').html();
if (typeof($(this).data("slider")) == "undefined"){
$(this).data("slider", data);
}
$('#slider').nivoSlider();
}, beforeClose: function(){
$('#slider, .nivo-controlNav, .nivo-html-caption').detach();
$(this).children('.slider-wrapper').html($(this).data("slider"));
}
});
});