Develop Reference

BxSlider with Thumbnails - Thumbnails dont slide along with the slider

I'm trying to fix a thumbnail BxSlider to work properly. I'm struggling with those:
1) When clicking on a thumbnail image the thumbnail slider has to slide along with the main slider.
2) And also making the main slider dragable. In order to change slides with the mouse.
3) The thumbnail arrows dont move the slides.
I've made an JSFIDDLE for you to see
And this is my my js code:
$(function() {
var initThumbnailsSlider = function(object) {
var $bxSlider = $(object);
if ($bxSlider.length < 1) {
return;
}
$bxSlider.bxSlider({
controls: false,
pagerCustom: '#bx-pager',
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500
});
$('.bx-custom-pager').bxSlider({
mode: 'horizontal',
maxSlides: 4,
minSlides: 2,
slideWidth: 156,
slideMargin: 25,
easing: 'easeInOutQuint',
controls: true,
nextText: "<i class='icm icm-Arrow_right'></i>",
prevText: "<i class='icm icm-Arrow_left'></i>",
pager: false,
moveSlides: 1,
infiniteLoop: false,
speed: 500,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
bx.goToSlide(idx);
}
};
// execute the function
initThumbnailsSlider('[data-bx-slider]');
});
Thanks a lot.
============================================
I've made a little search and i updated my JSFIDDLE
And I changed that part of my js code:
But sometimes it freezes :/
$bxPager.bxSlider({
mode: 'horizontal',
maxSlides: 4,
minSlides: 2,
slideWidth: 156,
slideMargin: 25,
easing: 'easeInOutQuint',
controls: true,
pager: false,
moveSlides: 1,
speed: 500,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
$bxSlider.goToSlide(idx);
}

I've used BxSlider before and haven't tried the slider you want to achieve. However, If you won't mind, I suggest that you try Slick. Below is a sample code that perfectly achieve what you want for your slide with lesser blocks of codes.
$('.product-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.custom-pager'
});
$('.custom-pager').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.product-slider',
dots: false,
centerMode: true,
focusOnSelect: true
});
.custom-pager .img-container {
width: 167px;
height: 165px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.product-slider .img-container {
height: 525px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.slide a{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<ul class="bxslider product-slider">
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
</div>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
</div>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
</div>
</li>
<!-- li :end -->
<!-- li.item -->
<li class="slide">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
</div>
</li>
<!-- li :end -->
</ul>
<ul id="bx-pager" class="custom-pager">
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="0">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette4.wikia.nocookie.net/devilmaou/images/9/92/Giratina.png/revision/latest?cb=20140413190250')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="1">
<div class="img-container" style="background-color: #f8f8f8; background-image: url('http://2.bp.blogspot.com/--gORRn5tL04/UDhREh-LLAI/AAAAAAAASA8/RN4gNJDMUm4/s1600/245Suicune+pokemon+gold+and+silver+artwork.png')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="2">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://vignette3.wikia.nocookie.net/pokemon/images/5/5c/486Regigigas_Pokemon_Ranger_Guardian_Signs.png/revision/latest?cb=20150114033117')">
</div>
</a>
</li>
<!-- li : end -->
<!-- li.item -->
<li class="slide">
<a class="block" data-slide-index="3">
<div class="img-container" style="background-color: #f3f3f3; background-image: url('http://www.legendarypokemon.net/images/xy/megavenusaur.jpg')">
</div>
</a>
</li>
<!-- li : end -->
</ul>

UPDATE
Since the original code is closer to what you wanted, but IMO not as good as the newer version, I figured I'll add it here:
Every click on an arrow advances both sliders in the same direction.
Every 6 clicks in one direction will cause the top slider to return to the same slide as the second slider's middle slide.
A click on one of the second slider's slide will make the first slider jump to the corresponding slide.
For some reason, the stack snippet is having DNS issues, so take a look at the
PLUNKER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SO35203571-38778710</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" />
<style>
#bx-pager {
left: 25px;
}
.bx-wrapper a.active {
border: 2px solid red;
}
.bx-controls-direction a {
top: -100% !important;
}
}
</style>
</head>
<body>
<ul class="bxslider">
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/trees.jpg" />
</li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href="">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" />
</a>
<a data-slide-index="1" href="">
<img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" />
</a>
<a data-slide-index="2" href="">
<img src="http://bxslider.com/images/730_200/houses.jpg" width="100" />
</a>
<a data-slide-index="3" href="">
<img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" />
</a>
<a data-slide-index="4" href="">
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" />
</a>
<a data-slide-index="5" href="">
<img src="http://bxslider.com/images/730_200/trees.jpg" width="100" />
</a>
</div>
<script src="http://cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
$(function() {
var bx = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
var cx = $('#bx-pager').bxSlider({
mode: 'horizontal',
maxSlides: 3,
minSlides: 3,
moveSlides: 1,
slideWidth: 275,
slideMargin: 40,
pager: false,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
bx.goToSlide(idx);
}
});
</script>
</body>
</html>
When I wrote that, my intentions was to sync both sliders, but what I didn't know back then is that when using a carousel and using a variable range on min/maxSlides option gets really messy. bxSlider will clone slides in order to cover any inconsistencies like having an odd number of slides on an infiniteLoop while a resize occurs. That's a ton of calculations and memory, hence bxSlider freezing up, or ending up with slides only clearing halfway past the edge are common occurrences.
I've refactored it then added your Pokemon theme and Bootstrap to my original Fiddle. There are a number of changes but I'll try to keep it brief:
Using the advanced easing options like: easing:'ease-in-out' requires:
useCSS: true (default)
jQuery Easing script loaded. So this should be added after the jquery.bxslider.min.js <script> tag:
<script src="https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js"></script>
Btw 'easeInOutQuint' isn't a value available with easing option, it's now `easing:'ease-in-out'. I have no idea why I added it in the first place.
The thumbnail slider .bx-pager is now immobilized for 2 good reasons:
The design of thumbnail navigation (or any navigation for that matter), should be presented in it's full capacity.
The extra coordination involved in syncing a slider that presents one slide (i.e. .bxslider) and a slider that presents 4 slides (i.e. .bx-pager) becomes problematic.
instantiate bxSlider in an expression:
var bx = $('.bxslider').bxSlider();
This makes using methods easier:
bx.goToSlide()
Removed all controls since .bx-pager is more than sufficient.
Tricked out thumbnails:
Used PNGs with a transparent background.
Added a simple function that toggles a class .on to the active thumbnail (i.e. .imgThumb.on}
This .on class employs transform, position, z-index, and transition CSS properties to animate.
If you resize the width smaller, you'll see the thumbnails layer on top of each other. That's a nice effect possible by using transparent background and avoiding cropping. So the background-size: cover which crops images is changed to background-size: contain which proportionally stretches the image to an element's edges without cropping.
Here's the demo. Good luck, sir.
FIDDLE

How can I center my different-sized images within a slideshow?

I'd like to have a slideshow of my work but I'm new to html/css/jquery. I'm working with a jquery plugin that looks like this:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
</script>
HTML looks like this:
<div align="center" id="slideshow">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="Images/Logo_01.jpg" width="960" height="576" alt="logo"/>
<img src="Images/Logo_02.jpg" width="384" height="640" alt="logo"/>
<img src="Images/Logo_03.jpg" width="640" height="640" alt="logo"/>
<img src="Images/Logo_04.jpg" width="960" height="510" alt="logo"/>
<img src="Images/Logo_05.jpg" width="956" height="640" alt="logo"/>
</div>
<div class="controller" id="next"></div>
</div>
I've been modifying the slider id & I've tried everything I know-margin:0 auto;, text-align: center, display: block; but nothing's working. help?

Try this:
Using jQuery
$('#slider img').css({position: 'relative', margin: 'auto'});
Using CSS, you have to use !important as cycle jQuery plugin is adding inline CSS to images
#slider img {
position: relative !important;
margin: auto !important;
}

how to create JQuery picture viewer with next and back buttons

Am Looking for help to solve this problem i would like to create a simple image viewer with the following specifications.
MySQL Fetch Images
User Click One Image to view (picture-viewer popup, selected image
shown)
User be able to see NEXT image by clicking NEXT
User be able to see PREV image by clicking PREV
On ESC picture-viewer closed
Since am not good in JavaScript Nor JQuery so i just applied the basic to produce the following code which is not able to meet minimum expectations. Instead of showing the user selected image is showing the first image from the unordered list and is not working on IE unless i apply auto start the function i don't need. NEXT/PREV picture has to be shown only if user click next/prev.
<script language="javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
var cur = $('.ppt li:first');
var interval;
$('#fwd').click( function() {
goFwd();
showPause();
} );
$('#back').click( function() {
goBack();
showPause();
} );
function goFwd() {
stop();
forward();
start();
}
function goBack() {
stop();
back();
start();
}
function back() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'first' )
cur = $('.ppt li:last');
else
cur = cur.prev();
cur.fadeIn( 1000 );
}
function forward() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
// close em_picture on esc press
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
em_picture_close();
}
}
function em_picture_close(){
document.getElementById('b1').style.overflow='auto';
$("#em_picture").hide();
$("#em_viewer").hide();
$(".images_tab").show();
$("#chart").show();
}
</script>
HTML
<div id="images_container">
<div id="em_picture" style="display:none;">
<div id="loadimage">
<ul class="ppt">
<li><img src="moments/1372072563PH.png" class="imgview" border="0" id="56"></li>
<li><img src="moments/1372084261art.jpg" class="imgview" border="0" id="3"></li>
<li><img src="moments/1372084531Hot.jpg" class="imgview" border="0" id="6"></li>
<li><img src="moments/137207211166.jpg" class="imgview" border="0" id="40"></li>
</ul>
<span class="prev" id="back" style="display:none" title="prev image"></span>
<span class="next" id="fwd" style="display:none" title="next image"></span>
</div>
</div>
</div>
<!-- table where the first image can be selected to be previewed -->
<table cellpadding="0" cellspacing="0" border="0" class="imagestable">
<tr>
<td id="" class="album_image">
<span class="moments_details" style="display:none;">share . hide . delete</span>
<img src="moments/1372072563PH02053J.JPG" class="my_em_moments" border="0" id="showme">
</td>
</table>
to those who can figure out this in other ways please do so, already made working code is accepted
Thanks and regards

ok for your ease, I'm eleborating it step by step:
download the files from the link.
place the lib and source folder in another folder.
place your file in which you're coding in the same folder.
place all images in same folder or whereever you want to place them
and write the code as
<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.fancybox').fancybox(); });
</script>
<style>
.fancybox-custom .fancybox-skin
{
box-shadow: 0 0 50px #222;
}
body
{
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Gallery Style 1</h3>
<p>
<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>

As you want to create something like picture gallery, jQuery fancybox will be the best option for it. The simple and same as your requirements. please see here.

ok try this code :
<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
}); });
</script>
<style>
.fancybox-custom .fancybox-skin
{
box-shadow: 0 0 50px #222;
}
body
{
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Gallery Style 1</h3>
<p>
<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>

<script type="text/javascript">
$(document).ready(function(e) {
$(".mqimg").mouseover(function()
{
$("#imgprev").animate({height: "250px",width: "70%",left: "15%"},100).html("<img src='"+$(this).attr('src')+"' width='100%' height='100%' />");
})
$(".mqimg").mouseout(function()
{
$("#imgprev").animate({height: "0px",width: "0%",left: "50%"},100);
})
});
</script>
<style>
.mqimg{ cursor:pointer;}
</style>
<div style="position:relative; width:100%; height:1px; text-align:center;">
<div id="imgprev" style="position:absolute; display:block; box-shadow:2px 5px 10px #333; width:70%; height:0px; background:#999; left:15%; bottom:15px; "></div>
</div>

Really Simple Slideshow open link in new window

I am using the Really Simple slideshow and nowhere in the page does it have a way to click on a slideshow to open in a new window or tab (target="_blank") to certain links.
I have the following, but it still opens in the same page:
<html>
<head>
<link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
controls: {
playPause: {auto: false},
previousSlide: {auto: false},
nextSlide: {auto: false},
index: {auto: false}
},
slide_data_selectors: {
caption: {selector: 'div.caption', attr: false}
},
effect: 'slideLeft',
interval: 4,
transition: 500
};
$('.rs-slideshow').rsfSlideshow(opts);
});
</script>
</head>
<body>
<div class="main">
<section class="demo-section clearfix" id="demo-1">
<div id="slideshow-capts-links" class="rs-slideshow">
<div class="slide-container" style="">
<img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
<div class="slide-caption">This is a caption for the first slide.</div>
</div>
<ol class="slides">
<li>
<a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
</li>
<li>
<div class="caption">
<p>This slide has the hyperlink</p>
</div>
</li>
<li>
</li>
</ol>
</section>
</div>
</body>
</html>
EDIT
I have tried the following code as suggested by Jigar Savla and yurtdweller but it keeps opening in the same page. I had tried in Chrome and IE.
<html>
<head>
<link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
controls: {
playPause: {auto: false},
previousSlide: {auto: false},
nextSlide: {auto: false},
index: {auto: false}
},
slide_data_selectors: {
caption: {selector: 'div.caption', attr: false}
},
effect: 'slideLeft',
interval: 4,
transition: 500
};
$('.rs-slideshow').rsfSlideshow(opts);
$('a.open_in_new_window').attr('target', '_blank');
});
</script>
</head>
<body>
<div class="main">
<section class="demo-section clearfix" id="demo-1">
<div id="slideshow-capts-links" class="rs-slideshow">
<div class="slide-container" style="">
<img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
<div class="slide-caption">This is a caption for the first slide.</div>
</div>
<ol class="slides">
<li>
<a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
</li>
<li>
<a class="open_in_new_window" href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-b.png" data-link-to="http://reallysimpleworks.com"></a>
<div class="caption">
<p>This slide has the hyperlink</p>
</div>
</li>
<li>
</li>
</ol>
</section>
</div>
</body>
</html>
Edit after answer
OK, I got it!
Thanks to Jigar Savla's code sample, I just added a couple new lines in the Javascript:
// Under if (slide.link_to) ...
if (slide.link_to_new_page) {
$img = $('').append($img);
}
// Under link_to: {selector: 'a', attr: 'data-link-to'}, ...
link_to_new_page: {selector: 'a', attr: 'data-link-to-new-page'},
And in the html changeddata-link-to=http://google.com to data-link-to-new-page=http://google.com
Now if I just want to use the link and have it open in the same page I use data-link-to, otherwise data-link-to-new-page.
Worked great!!
THANKS!

Well i would have asked you to add a separate class for each anchor tag that you need to have a link to open in new window.
say for example if you have used open_in_new_window as class name to open links in new window than the code would become:
$('a.open_in_new_window').attr('target', '_blank');
hope this helps ;)

You can add
$('a').click(function() {
$(this).attr('target', '_blank');
});
after
$('.rs-slideshow').rsfSlideshow(opts);
this will make all the links on the page open in a new window. If you had classes on the links, we can change the code to target those specific classes and open only the ones you want to select.

Because Really Simple Slideshow generates the HTML for each slide on the fly, just before the transition happens, you’ll need to target the links after they’re generated. You can do this by attaching to the rsPostTransition event:
$('#my-slideshow').bind('rsPostTransition', function() {
$('#my-slideshow a.open_in_new_window').attr('target', '_blank');
});
Or you could use jQuery’s delegated events, which is probably the neater option:
$('#my-slideshow').on('click', 'a.open_in_new_window', function() {
$(this).attr('target', '_blank');
});

Fancybox - "The requested content cannot be loaded."

I'm experiencing a problem with Fancybox on my portfolio. It works on every page but one - http://pandadol.com/candyshop.html.
Images 7, 8, 9, 11, 12, 13, 23, 24, 25, 27 give me a "requested content cannot be loaded error", and opening them up in a new tab returns "You don't have permission to access /pics/candyshop/7.jpg on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request."
All the images are definitely on the server. Here is the code -
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".menu").click(function(){ // Update class to point at the head of the list
});
}
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24042513-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
</script>
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.8.0.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.0"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.0" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.3" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<div id="wrapper">
<div class="header clear">
<h1 class="title">RACHEL SHI<br></h1>
<h1 class="title">DESIGN + ILLUSTRATION</h1>
<ul class="menu">
<li class="first">Menu<div class="droparrow"></div></li>
<li>about</li>
<li>#pandadol</li>
<li>pandadol.tumbl</li>
<li>pinterest</li>
<li>instagram</li>
<li>cv</li>
</ul>
</div>
<div class="content">
<div class="post-meta">
<h1>The Candy Shop Project</h1>
<div class="post-date"> 2012<P>
<b>Personal</b><br>
For 5 months I was a sales assistant at a candy shop. I took any lull in activity to draw customers. Here are the results.
</div>
</div>
<div class="post-content">
<p>
<a class="fancybox" href="../pics/candyshop/1.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/1.jpg" alt="" / width="600px"></a>
<a class="fancybox" href="../pics/candyshop/2.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/2_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/3.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/3_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/4.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/4_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/5.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/5_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/6.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/6_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/7.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/7_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/8.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/8_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/9.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/9_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/10.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/10_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/11.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/11_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/12.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/12_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/13.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/13_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/14.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/14_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/15.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/15_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/16.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/16_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/17.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/17_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/19.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/19_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/18.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/18_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/20.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/20_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/21.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/21_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/22.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/22_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/23.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/23_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/24.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/24_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/25.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/25_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/26.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/26_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/27.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/27_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/28.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/28_s.jpg" alt="" /></a>
</p>
</div>
Any advice would be appreciated. Thank you!

This looks like a simple permissions error as when you try and view one of the non-loading images directly in a browser you get a 403 Forbidden response.
Image no 7 has an additional fancybox.ajax class not present on the others which is probably causing the issue you mention in your comment to your original post.