[smortimer]

Hello
I really have no idea why this isn't working

when you click on "view deal" on this page a popup window should show but for some reason its opening in a new window. I'm using Colorbox.

This is the code:

<script src="http://www.fonda.co.uk/HeraxDev/js/jquery.colorbox.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		//Examples of how to assign the ColorBox event to elements
		$(".group1").colorbox({rel:'group1'});
		$(".group2").colorbox({rel:'group2', transition:"fade"});
		$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
		$(".group4").colorbox({rel:'group4', slideshow:true});
		$(".ajax").colorbox();
		$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
		$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
		$(".inline").colorbox({inline:true, width:"50%"});
		$(".callbacks").colorbox({
			onOpen:function(){ alert('onOpen: colorbox is about to open'); },
			onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
			onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
			onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
			onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
		});
                              
		//Example of preserving a JavaScript event for inline calls.
		$("#click").click(function(){ 
		$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
		return false;
		});
		});
	</script>
	<script>
		$(document).ready(function(){
		$(".ajax").colorbox();
		});
	</script>

Any help or guidance would be a help. Thank you.

[Spitfire]

Your jQuery:

<script>
     $(document).ready(function(){
     $(".ajax").colorbox();
     });
</script>

Is assigning colorbox to anything with the class of "ajax", and you don't have anything with that class. You'd need to either add the "ajax" class to all your links or change the jQuery to something like:

<script>
     $(document).ready(function(){
     $("#latestdeals a").colorbox();
     });
</script>

[zed]

it's also there twice?

[smortimer]

Thanks for that. The pop up works but non of the styling is there can't work out why they are not showing.

Sorry for the questions, my boss has landed me in it and didn't consider to ask me if I can do it or not before Friday. Grr.

This is how the page should look:

link

Anyone?

[smortimer]

I really don't understand this. If someone could give me a hand or know of an alternative that would be great.

[Olavi]

pop up is not working again?

[smortimer]

Olavi, on 16 January 2012 - 05:20 PM, said:

pop up is not working again?

I don't get it I've tried all sorts of things and nothing seems to work. The age I wanted to "pop up" opens a new window.

I'm gonna start from scratch and start again tomorrow

[smortimer]

smortimer, on 16 January 2012 - 05:22 PM, said:

I don't get it I've tried all sorts of things and nothing seems to work. The age I wanted to "pop up" opens a new window.

I'm gonna start from scratch and start again tomorrow

I've read a little and have noticed mentionings of HTML5. Does this mean Colorbox only works in HTML5?

[4colourprogress]

I checked the tools and your jquery.colorbox-min.js isn't being loaded.

It links to this directory

http://www.fonda.co....colorbox-min.js

you should place it in the same place as your other jquery files

http://www.fonda.co.uk/HeraxDev/js/"file_here"

[smortimer]

4colourprogress, on 17 January 2012 - 10:32 AM, said:

I checked the tools and your jquery.colorbox-min.js isn't being loaded.

It links to this directory

http://www.fonda.co....colorbox-min.js

you should place it in the same place as your other jquery files

http://www.fonda.co.uk/HeraxDev/js/"file_here"

Still seems to be opening in a new window. I've watched numerous videos and read the ColorBox FAQs but can't seem to understand where it is I am going wrong. Sorry about all this...

[4colourprogress]

It's cool, Your code seems a bit inconsistent though so first thing you need to do is tidy it up a bit!

Replace this;

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://www.fonda.co.uk/HeraxDev/js/jquery.colorbox.js" type="text/javascript"></script>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>

With this;

<!-- Start Colorbox -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://www.fonda.co.uk/HeraxDev/js/jquery.colorbox.js" type="text/javascript"></script>
<script src="http://www.fonda.co.uk/HeraxDev/js/jquery.colorbox-min.js" type="text/javascript"></script>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<!-- End Colorbox -->

and move your jquery.colorbox-min.js into the JS folder on your site.

Let me know once you have done that and we can move on to the next problem

This post has been edited by 4colourprogress: 17 January 2012 - 11:04 AM

[smortimer]

[quote name='4colourprogress' timestamp='1326798093' post='370704']
It's cool, Your code seems a bit inconsistent though so first thing you need to do is tidy it up a bit!

Replace this;

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://www.fonda.co.uk/HeraxDev/js/jquery.colorbox.js" type="text/javascript"></script>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>

With this;

[code]

Think you might be looking at an old page. Try this link

I've updated it slightly since

[4colourprogress]

Try changing this

<script>
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>

to this;

<script>
    jQuery('#latestdeals').colorbox();
</script>

[smortimer]

4colourprogress, on 17 January 2012 - 11:16 AM, said:

Try changing this

<script>
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});
				
				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>

to this;

<script>
    jQuery('#latestdeals').colorbox();
</script>

Seem to be getting the same result. Opening in a new window.

was wondering if it was anything to do with this:

<a class=”colorbox” href=deals/Luxembourg.html>View details</a>

[4colourprogress]

Okay try this

<script>
    jQuery('a.deals').colorbox();
</script>

then change this

<a class="”colorbox”" href="deals/Luxembourg.html">View details</a>

to this ;

<a class='deals' href="deals/Luxembourg.html">View details</a>

edit for single quotes

This post has been edited by 4colourprogress: 17 January 2012 - 11:30 AM

[smortimer]

4colourprogress, on 17 January 2012 - 11:26 AM, said:

Okay try this

<script>
    jQuery('a.deals').colorbox();
</script>

then change this

<a class="”colorbox”" href="deals/Luxembourg.html">View details</a>

to this ;

<a class='deals' href="deals/Luxembourg.html">View details</a>

edit for single quotes

Nope that didn't work. This is what I am hoping to achieve:

My link Outside HTML (Ajax) or Inline HTML

[4colourprogress]

Hmm, looks like you used the double quotes

<a class="deals" href="deals/Luxembourg.html">View details</a>

try changing it to

<a class='deals' href="deals/Luxembourg.html">View details</a>

edit:

Also try changing the head part to this

<script>
     jQuery(document).ready(function(){
     jQuery('a.deals').colorbox();
     });
</script>

If it doesn't work I'm out of ideas!

This post has been edited by 4colourprogress: 17 January 2012 - 11:46 AM

[smortimer]

4colourprogress, on 17 January 2012 - 11:40 AM, said:

Hmm, looks like you used the double quotes

<a class="deals" href="deals/Luxembourg.html">View details</a>

try changing it to

<a class='deals' href="deals/Luxembourg.html">View details</a>

edit:

Also try changing the head part to this

<script>
     jQuery(document).ready(function(){
     jQuery('a.deals').colorbox();
     });
</script>

If it doesn't work I'm out of ideas!

Ah Ha!! It worked. Images aren't showing though and the list seems to be wrapping around. 3/4 the way there

[4colourprogress]

Hurray! looks like the images are just linking to the wrong location, check that the links are pointing to the right location and you should be golden.

[smortimer]

4colourprogress, on 17 January 2012 - 11:55 AM, said:

Hurray! looks like the images are just linking to the wrong location, check that the links are pointing to the right location and you should be golden.

Hum. They are in the right location but are not showing. Can I pick your brains?

Nice photography by the way

[4colourprogress]

I would advise moving all of your images into the same location to avoid this kind of problem, keeping all your assets in single folders (images, styesheets, javascript) makes it much easier to find things.

The correct link to your images should be this;

<img src="../Images/yourimage.png" width="" height="" alt="">

your other images are pointing to a different folder?

<img src="Logos for Deals/2 - Ben Sherman Deal/Oxford Industries.JPG" width="190" height="50" alt="Ben Sherman">

you can't have spaces in the file name so make sure you use underscores.

move all the other images into the Images folder and use the code shown above and it should find them.

What are you using to edit the code just out of curiosity?

[smortimer]

4colourprogress, on 17 January 2012 - 12:08 PM, said:

I would advise moving all of your images into the same location to avoid this kind of problem, keeping all your assets in single folders (images, styesheets, javascript) makes it much easier to find things.

The correct link to your images should be this;

<img src="../Images/yourimage.png" width="" height="" alt="">

your other images are pointing to a different folder?

<img src="Logos for Deals/2 - Ben Sherman Deal/Oxford Industries.JPG" width="190" height="50" alt="Ben Sherman">

you can't have spaces in the file name so make sure you use underscores.

move all the other images into the Images folder and use the code shown above and it should find them.

What are you using to edit the code just out of curiosity?

The files were named by the client and there are over 100 of them, they also have put them into folders and sub-folders. Using Dreamweaver CS4.

[smortimer]

One question though. When the pop up appears the page below inherits the same styling as the pop up. Any ideas?