jQuery Lightbox2

Permalink 1 user found helpful
Hi I want to add a simple jQuery as above the lightbox. However when i add this it either does not work or the edit bar in C5 goes on the missing list. I have smooth scroller all alive and working just not this. I have tried lots of light boxes al with the same issue. Not keen on using the zoom as I need a different thumb to the enlarged clicked image. Any ideas please???

clairec
 
clairec replied on at Permalink Reply
clairec
Would anyone be able to help on this here is my code in the head file I have placed the lightbox css in the default css still not working. I'm completely stumped tried everything now.
Any help would be really appreciated. Thankyou


<link href="<?=$this->getThemePath()?>/default.css" rel="stylesheet" type="text/css" />

<script src="<?php echo $this->getThemePath()?>/js/cufon-yui.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/js/Coolvetica_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('h1');</script>
<script type="text/javascript">Cufon.replace('h2');</script>
<script src="<?php echo $this->getThemePath()?>/js/smoothscroll.js" type="text/javascript"></script>

<script src="<?php echo $this->getThemePath()?>/js/prototype.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath()?>/js/lightbox.js" type="text/javascript"></script>
<?php Loader::element('header_required'); ?>
jgaris replied on at Permalink Reply
I don't know specifically, but I see you are trying to use prototype and scriptaculous which has been known to conflict with jquery at times.
clairec replied on at Permalink Reply
clairec
I know that sometimes has an issue however this is needed as far as I'm aware to function. It would be such a useful block if it was developed I would certainly pay for this. If i find the solution I will post however I think I have tried everything now not sure what else to try.
meffid replied on at Permalink Reply
What were your steps to implement lightbox?

I tried:

Uploading 'lightbox' folder into my root folder

editing header.php to include:

the rel css link
the rel script information

(with specifying full paths;http://www.asd.com/lightbox/css.css... )

then editing 1 image to become a link in my content block, switching to html view then adding rel="lightbox"

These are all the instructions require, it opened the image link in a new window.

Any ideas? What did you try?
clairec replied on at Permalink Reply
clairec
On yours you have the css call twice by the looks of things.

For me I added the lightbox, scriptaculous and prototype into the themes js folder which are placed in the head section as above. Then like youself used the html block to add the relevant images like this for instance

<a href="http://www.ithinkdesign.co.uk/themes/ithink-new/images/image-1.jpg" rel="lightbox"title=""><img src="http://www.ithinkdesign.co.uk/themes/ithink-new/images/image-2.jpg" alt="creative Design London" width="53" height="43" border="0" /></a>

and it does not like it at all. I think I will have to look at another lightbox although I prefer this original one.
meffid replied on at Permalink Reply
Please post when you get it working, I'm having the same trouble, it's just not working.
aeroclown replied on at Permalink Reply
aeroclown
Prototype is a fork of jquery. I don't think you can use both jquery and prototype.

<link rel="stylesheet" type="text/css" href="/concrete/css/ccm.base.css" />
<script type="text/javascript" src="/concrete/js/jquery.js"></script>
<script type="text/javascript" src="/concrete/js/ccm.base.js"></script>
<style>

If you notice, the automatic header includes jquery, so prototype is being overidden when your page post.

You can try removing the header include for concrete, but i don't know that it is possible to do so. Though that isn't much of a work around as it is likely to break other things on your site.
meffid replied on at Permalink Reply
Which file is that include located?
aeroclown replied on at Permalink Reply
aeroclown
Well, while it can be done, you will lose your pages dashboards unless there is a way to include that specific code without the inclusion of jquery. I think the calls to jquery are part of the call to the required header in your template.

<?php Loader::element('header_required'); ?>

is if I am not mistaken what also loads in jquery. Have you tried using it without prototype ?
meffid replied on at Permalink Reply
Just found this in another thread:

Turns out the problem is a conflict between jQuery.js & prototype.js: they both use '$', so short of rewriting one or the other (and all the dependant scripts to change the variable) I've decided to use a jQuery-based lightbox and am having no more problems.
meffid replied on at Permalink Reply
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<link rel="stylesheet" type="text/css" href="/shadowbox-js/shadowbox/shadowbox.css">
<script type="text/javascript" src="/concrete/js/jquery.js"></script>
<script type="text/javascript" src="/shadowbox-js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>


put that in your header.php

upload the shadowbox files into

root_/shadowbox-js

this works perfectly, would appreciate anyone willing to make a block for this.
clairec replied on at Permalink Reply
clairec
All sorted now works perfectly what a mare to figure out this block would be pretty cool if it was to be developed
meffid replied on at Permalink Reply
Awesome chick, I definitely no developer, took a couple of hours wasting time with lightbox, hope this one was better.
fozzieb replied on at Permalink Reply
Hi there,

the theme i am using doeas not look like it has a header.php file (not in the folder)

is there somewhere else i should put the code?

or do i create a header.php file?

cheers.
meffid replied on at Permalink Reply
concrete/themes/yourtheme/elements/header.php
fozzieb replied on at Permalink Reply
i don't have one, my theme only shows up in the following place

themes/lightword/

and there is only a default.php and style.css files.

ther is also an images and js folder but no header.php
clairec replied on at Permalink Reply
clairec
Is there an elements folder? if so look in there. Or as mentioned you don't need to use a header.php everything can be done on the default page if you wish.
meffid replied on at Permalink Reply
I only put it in header.php because it would include the script shadowbox requires would then be on my full width pages, sidebar pages and default pages.

By the sounds you only have a default page fozzie, so follow the instructions on the shadowbox site, insert the code suggested before the </head> of your default.php and see if that works.

I could probably take a look at your site if you PM me.
fozzieb replied on at Permalink Reply
cheers, i'll give it a go and see if i get it.

I may PM you if i get stuck.

thanks
aeroclown replied on at Permalink Reply
aeroclown
You don't have to use a header.php and use a php include if you don't want to. You can write your header right in your page type file it doesn't make much difference.

<?php Loader::element('header_required'); ?>

This however is something that is totally different. It is a call to an internal concrete component that loads a set of information in to your pages header, not to be confused with rendered information in the browser.
fozzieb replied on at Permalink Reply
Ok i cant get this to work

when i click on the image to view, the screen dims but no picture loads.

the images on my site are hosted on flickr and load from there.

any thoughts

see example;

http://www.unit5architects.com/index.php/projects/haghill/...

cheers.
meffid replied on at Permalink Reply
link the image to the IMAGE - not flickr url


http://farm4.static.flickr.com/3506/4074731330_44130dd0ef_b.jpg...

or upload it to your assets folder.
fozzieb replied on at Permalink Reply
Bingo, well done my friend

thanks for the help
aeroclown replied on at Permalink Reply
aeroclown
If all you want to do is zoom the image, don't use lightbox. Setup your market place account and grab the free Zoom Image Add-on.

http://www.concrete5.org/marketplace/addons/zoom_image/...

Or alternatively, you can grab the Free Flikr Addon.

http://www.concrete5.org/marketplace/addons/flickr/...
Tony replied on at Permalink Best Answer Reply
Tony
btw, if you're sick of dealing with all this, there's always the marketplace Popup block:

http://www.concrete5.org/marketplace/addons/popup/...

..which should be a lot easier to skin the design to match your site too.
pvs replied on at Permalink Reply
pvs
I implement the thickbox (http://jquery.com/demo/thickbox/) in a single page under dashboard for my package.

<?php
$ci = Loader::helper('concrete/urls');
$pg = new Package();
$pg = $pg->getByHandle("packagename");
$ci = Loader::helper('concrete/urls');
//get the package url
$packageURL = $ci->getPackageURL($pg);
$addthis = $html->css($packageURL.'/css/thickbox.css');
$this->addHeaderItem($addthis, 'CONTROLLER');  
$addthis = $html->javascript($packageURL.'/js/thickbox.js');
$this->addHeaderItem($addthis, 'CONTROLLER');  
?>
<script type="text/javascript">
// Set thickbox loading image
tb_pathToImage = "<?php echo $packageURL;?>/blocks/properties_images/images/loading-thickbox.gif";
zoinks replied on at Permalink Reply
Vnikos, I wish I understood what you meant by "I implement the thickbox in a single page under dashboard for my package."

Did you get Thickbox to work as a plug-in somehow?

Or, wait, you're saying you have a Single Page template and you just add a new page using that Single Page template and then swap out the images as needed? If so, that's pretty cool.
olacom replied on at Permalink Reply
olacom
Shadowbox is working but iframe dont seem to work, anyone know why?
inpixel replied on at Permalink Reply
I can't use shadowbox, lightbox, fancybox...anyone. I did the same that meffid said, but with no results. I do the correct steps but withno result. It drives me crazy...

(olacom, how did you configure shadowbox? )
meffid replied on at Permalink Reply
Let's see?

Post steps, links, code etc.

What's the error?
inpixel replied on at Permalink Reply
After all day, i've used an "universal link" (ashttp://....) to refeer all shadowbox and jquerys files.

[Now there are just some problems with differents navigators to show correctly swf files.

I have a slideshow in the header, and when i open shadowbox with a swf file inside (swf that you can interactuate with it) this doesn't run fine. The swf stops when the banner is doing a transition.] - Resolve it downloading the latest version of the navigators.
Pritam replied on at Permalink Reply
This block should fulfill your purpose entirely and your clients could update the gallery themselves at ease and not have to mess with the code.

http://www.concrete5.org/marketplace/addons/gallery/...