I have a problem with a slider. When I load the first time my Web page, it shows a slider with some images. I have some links to change the images to show, so when I click, I want to display as a slider the other ones. The problem is that when I click on the new link, it doesn't use the jquery function to format the slider.Here I paste some code so you can figure out:\[code\]<div class="contenidor_escaparates_2011"> <div id="contenidor_slider" class="containerGaleria"> <ul id="slideshow"> <li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li> <li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li> <li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li></ul> </div></div>\[/code\]And then the jquery:\[code\]$(document).ready(function(){ var timeout, manualMode = false, $slideshow = $('#slideshow'), $items = $slideshow.find('li').hide(), total = $items.length, getItem = function($item, trav) { var $returnItem = $item[trav](); return $returnItem.length ? $returnItem : $items[(trav == 'next') ? 'first' : 'last'](); }, showItem = function($currentItem, $itemToShow) { var $itemToShow = $itemToShow || getItem($currentItem,'next'); $currentItem.fadeOut(300, function() { $itemToShow.fadeIn(300, fadeCallback); }); }, fadeCallback = function() { if (manualMode) { return; } var $this = $(this), $next = getItem($this, 'next'), num = $this.prevAll().length + 1; // set the timeout for showing // the next item in 5 seconds timeout = setTimeout(function() { showItem($this, $next); }, 3000); }, handleBtnClick = function(e) { clearTimeout(timeout); manualMode = true; var $currentItem = $items.filter(':visible'), $itemToShow = getItem($currentItem, e.data.direction); showItem($currentItem, $itemToShow); }; $items.eq(0).fadeIn(500, fadeCallback);});\[/code\]This works perfect for the first time I load the page, but when I change the content with this:\[code\]<script type="text/>$('#nuestra_tienda_show').click(function() { $('.containerGaleria').html(''); $('<ul id="slideshow"><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="http://stackoverflow.com/questions/12732695/img/Escaparates_2011/img14.jpg" alt="" /></li></ul> ') .prependTo('.containerGaleria'); $('#galeria_seleccionada').html('Nuestra tienda 2011'); location.reload(); });</script>\[/code\]So basically, what I do is, after an onclick() event on some link, I change the html content of a div, but obviously, it doesn't use the jquery, as it wasn't loaded at first. Any idea on how to solve this? If I use location.reload(); it shows the first items I had inside, so it doesn't work for me...EDIT:
Wait, I edit the jsFiddle...
Wait, I edit the jsFiddle...