Jquery Colorbox

I'm developing a site that uses a colorbox to view a larger version of the product.

http://www.bohemia.arrivaldesign.co.uk/boutique/dresses/dilema_dress

My dilemma is that I need the images to scroll through when you're in the colorbox using the next/previous arrows, this is working fine for the initial load of the page, if you click the magnifying glass, but once you click on the numbered boxes, I can get the colorbox to load at the correct point, with the same image and in the correct order, but I can't seem to get the next/previous arrows to work?

Any ideas?

Thanks,

Chris
<script type="text/javascript"> 
	$(document).ready(function(){ 
			$('a[rel=zoomer]').colorbox(); 
			$('.display_slides').click(function(){ 
				if ($(this).attr("id") == "no1") {
					$("a[rel='zoomer']:eq(0)").click(); 
				}
				else if ($(this).attr("id") == "no2") {
					$("a[rel='zoomer']:eq(1)").click(); 
				}
				else if ($(this).attr("id") == "no3") {
					$("a[rel='zoomer']:eq(2)").click(); 
				}
				else if ($(this).attr("id") == "no4") {
					$("a[rel='zoomer']:eq(3)").click(); 
				}
				return false; 
			}) 
			$("#prod_img li a").click(function(event){
				$("#prod_img li a").removeClass("onstate");
				var newNo = $(this).attr("rel");
				$(".display_slides").attr("id", newNo);
				$(this).addClass("onstate");
				$("img#mainpic").hide();
				var newSRC = $(this).attr("href");
				$("img#mainpic").attr("src", "/garments/page_" + newSRC).fadeIn();
				var newZoom = $(this).attr("href");
				$("a[rel='zoomer']").attr("href", "/garments/" + newZoom);
				event.preventDefault();
			});
	}); 
</script> 
 
<div class="hide"> 
                <a href="/garments/b4864.jpg" rel="zoomer" id="zoom1" title="Dilema Dress">1</a>
                                <a href="/garments/asd63.jpg" rel="zoomer" id="zoom2" title="Dilema Dress">2</a>
                                <a href="/garments/6pu65.jpg" rel="zoomer" id="zoom3" title="Dilema Dress">3</a>
                                <a href="/garments/ftbclose up.jpg" rel="zoomer" id="zoom4" title="Dilema Dress">4</a>
                                </div> 
 
    <div id="prod_img">
      <div class="pg_image"><img src="/garments/page_b4864.jpg" name="mainpic" width="238" height="306" id="mainpic" /><a href="/garments/b4864.jpg" title="Dilema Dress" class="display_slides" id="no1"><img src="/images/zoom.gif" alt="Enlarge" width="21" height="21" class="zoom" /></a></div>
      <ul>
        <li><a href="b4864.jpg" class="onstate" rel="no1">1</a></li>
                <li><a href="asd63.jpg" rel="no2">2</a></li>
                <li><a href="6pu65.jpg" rel="no3">3</a></li>
                <li><a href="ftbclose up.jpg" rel="no4">4</a></li>
              </ul>
    </div>

Open in new window

djfenomAsked:
Who is Participating?
 
Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
The left right navigation is working fine even after you click the numbers.
The problem is when the number is clicked, you are resetting the href of all your rel=zoomer to the same image.
<script type="text/javascript"> 
        $(document).ready(function(){ 
                        $('a[rel=zoomer]').colorbox(); 
                        $('.display_slides').click(function(){ 
                                if ($(this).attr("id") == "no1") {
                                        $("a[rel='zoomer']:eq(0)").click(); 
                                }
                                else if ($(this).attr("id") == "no2") {
                                        $("a[rel='zoomer']:eq(1)").click(); 
                                }
                                else if ($(this).attr("id") == "no3") {
                                        $("a[rel='zoomer']:eq(2)").click(); 
                                }
                                else if ($(this).attr("id") == "no4") {
                                        $("a[rel='zoomer']:eq(3)").click(); 
                                }
                                return false; 
                        }) 
                        $("#prod_img li a").click(function(event){
                                $("#prod_img li a").removeClass("onstate");
                                var newNo = $(this).attr("rel");
                                $(".display_slides").attr("id", newNo);
                                $(this).addClass("onstate");
                                $("img#mainpic").hide();
                                var newSRC = $(this).attr("href");
                                $("img#mainpic").attr("src", "/garments/page_" + newSRC).fadeIn();
                                var newZoom = $(this).attr("href");
                                $("a[rel='zoomer']").attr("href", "/garments/" + newZoom); // <-- PROBLEM IS HERE
                                event.preventDefault();
                        });
        }); 
</script> 
 
<div class="hide"> 
                <a href="/garments/b4864.jpg" rel="zoomer" id="zoom1" title="Dilema Dress">1</a>
                                <a href="/garments/asd63.jpg" rel="zoomer" id="zoom2" title="Dilema Dress">2</a>
                                <a href="/garments/6pu65.jpg" rel="zoomer" id="zoom3" title="Dilema Dress">3</a>
                                <a href="/garments/ftbclose up.jpg" rel="zoomer" id="zoom4" title="Dilema Dress">4</a>
                                </div> 
 
    <div id="prod_img">
      <div class="pg_image"><img src="/garments/page_b4864.jpg" name="mainpic" width="238" height="306" id="mainpic" /><a href="/garments/b4864.jpg" title="Dilema Dress" class="display_slides" id="no1"><img src="/images/zoom.gif" alt="Enlarge" width="21" height="21" class="zoom" /></a></div>
      <ul>
        <li><a href="b4864.jpg" class="onstate" rel="no1">1</a></li>
                <li><a href="asd63.jpg" rel="no2">2</a></li>
                <li><a href="6pu65.jpg" rel="no3">3</a></li>
                <li><a href="ftbclose up.jpg" rel="no4">4</a></li>
              </ul>
    </div>

Open in new window

0
 
djfenomAuthor Commented:
Thanks sudaraka, how would I go about fixing this?

Chris
0
 
kivan24Connect With a Mentor Commented:
Let's look page source

When you load page first time:
<div class="hide"> 
    <a href="/garments/b4864.jpg" rel="zoomer" id="zoom1" title="Dilema Dress">1</a>
    <a href="/garments/asd63.jpg" rel="zoomer" id="zoom2" title="Dilema Dress">2</a>
    <a href="/garments/6pu65.jpg" rel="zoomer" id="zoom3" title="Dilema Dress">3</a>
    <a href="/garments/ftbclose up.jpg" rel="zoomer" id="zoom4" title="Dilema Dress">4</a>
</div>

Open in new window

everything ok

When you click on the numbered boxe 2:
<div class="hide"> 
    <a class="cboxelement" href="/garments/asd63.jpg" rel="zoomer" id="zoom1" title="Dilema Dress">1</a>
    <a class="cboxelement" href="/garments/asd63.jpg" rel="zoomer" id="zoom2" title="Dilema Dress">2</a>
    <a class="cboxelement" href="/garments/asd63.jpg" rel="zoomer" id="zoom3" title="Dilema Dress">3</a>
    <a class="cboxelement" href="/garments/asd63.jpg" rel="zoomer" id="zoom4" title="Dilema Dress">4</a>
</div>

Open in new window


When you click on the numbered boxe 3:
<div class="hide"> 
   <a class="cboxelement" href="/garments/6pu65.jpg" rel="zoomer" id="zoom1" title="Dilema Dress">1</a>
   <a class="cboxelement" href="/garments/6pu65.jpg" rel="zoomer" id="zoom2" title="Dilema Dress">2</a>
   <a class="cboxelement" href="/garments/6pu65.jpg" rel="zoomer" id="zoom3" title="Dilema Dress">3</a>
   <a class="cboxelement" href="/garments/6pu65.jpg" rel="zoomer" id="zoom4" title="Dilema Dress">4</a>
</div>

Open in new window

When you click on numbered boxes all A tag link to the same file.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Is it necessary to change the href on click? I think you already have all the correct images set on page load right?
0
 
djfenomAuthor Commented:
Ahhh, fixed it, just took out this line:

$("a[rel='zoomer']").attr("href", "/garments/" + newZoom);

Thanks guys.

Chris
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Yup, that's it :)
Glad to help, Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.