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???
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.
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.
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?
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?
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.
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.
Please post when you get it working, I'm having the same trouble, it's just not working.
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.
<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.
Which file is that include located?
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 ?
<?php Loader::element('header_required'); ?>
is if I am not mistaken what also loads in jquery. Have you tried using it without prototype ?
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.
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.
<!-- 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.
All sorted now works perfectly what a mare to figure out this block would be pretty cool if it was to be developed
Awesome chick, I definitely no developer, took a couple of hours wasting time with lightbox, hope this one was better.
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.
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.
concrete/themes/yourtheme/elements/header.php
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
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
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.
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.
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.
cheers, i'll give it a go and see if i get it.
I may PM you if i get stuck.
thanks
I may PM you if i get stuck.
thanks
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.
<?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.
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.
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.
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.
http://farm4.static.flickr.com/3506/4074731330_44130dd0ef_b.jpg...
or upload it to your assets folder.
Bingo, well done my friend
thanks for the help
thanks for the help
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/...
http://www.concrete5.org/marketplace/addons/zoom_image/...
Or alternatively, you can grab the Free Flikr Addon.
http://www.concrete5.org/marketplace/addons/flickr/...
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.
http://www.concrete5.org/marketplace/addons/popup/...
..which should be a lot easier to skin the design to match your site too.
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";
Viewing 15 lines of 38 lines. View entire code block.
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.
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.
Shadowbox is working but iframe dont seem to work, anyone know why?
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? )
(olacom, how did you configure shadowbox? )
Let's see?
Post steps, links, code etc.
What's the error?
Post steps, links, code etc.
What's the error?
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.
[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.
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/...
http://www.concrete5.org/marketplace/addons/gallery/...
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'); ?>