Zoom Content — new block
Permalink 2 users found helpful
The block (attached here) is a development of Remo's Zoom Image block, which implements Cabel Sasser’s FancyZoom. (the jquery version athttp://orderedlist.com/articles/fancyzoom-meet-jquery)....
The block allows you to create a zoom box of any sort of content using the Tiny MCE editor. Displayed on the page is a title (which you can define) which when clicked will zoom open a large box with the content.
I basically combined code from Remo's Zoom Image block with the Content block so it might be a bit rough and ready for some.
This is my first block creation and given my relatively low skill in php and jquery it is proof that C5 is great and relatively straight forward for beginners to develop with (even if just with a bit of copy and paste).
Anyway, nice to give something back to the community finally! I don't think this block will be of break any ground for the more advanced but it solved a problem for me, so i hope it is of some use to someone!
The block allows you to create a zoom box of any sort of content using the Tiny MCE editor. Displayed on the page is a title (which you can define) which when clicked will zoom open a large box with the content.
I basically combined code from Remo's Zoom Image block with the Content block so it might be a bit rough and ready for some.
This is my first block creation and given my relatively low skill in php and jquery it is proof that C5 is great and relatively straight forward for beginners to develop with (even if just with a bit of copy and paste).
Anyway, nice to give something back to the community finally! I don't think this block will be of break any ground for the more advanced but it solved a problem for me, so i hope it is of some use to someone!
Hi Kathleen,
Glad it is of use to you.
Regarding the central alignment, i built this to display a menu on a Restaurant website and so the central alignment was appropriate – i'm sure for other uses i'll need it left aligned though...
In the view.php just add "text-align:left;" to the styles at the top for the div #zoom_content.
The whole style section will then read.
Alternatively you could over ride all those styles in the theme's css file.
Also regarding the SEO i'm no expert on this but all the content is clearly visible if you check the page source when it has loaded, which is basically what the search engine will read – it is just the css hiding it when the page first loads. So i think that it will all be searched as content in the usual way.
Glad it is of use to you.
Regarding the central alignment, i built this to display a menu on a Restaurant website and so the central alignment was appropriate – i'm sure for other uses i'll need it left aligned though...
In the view.php just add "text-align:left;" to the styles at the top for the div #zoom_content.
The whole style section will then read.
<style> #zoom { z-index: 1000; } #zoom_content { overflow: auto; width: 560px; height: 560px; padding: 20px; text-align:left; } </style>
Alternatively you could over ride all those styles in the theme's css file.
Also regarding the SEO i'm no expert on this but all the content is clearly visible if you check the page source when it has loaded, which is basically what the search engine will read – it is just the css hiding it when the page first loads. So i think that it will all be searched as content in the usual way.
Hi Olay
Many thanks for your help. The changes you recommended worked perfectly, and I'm very happy with how it looks.
I didn't think to check the page source at first, and what you've said makes sense. It's all there and searchable by search engines, which is great.
Thanks again for your help, and for making your zoom content block available.
Many thanks for your help. The changes you recommended worked perfectly, and I'm very happy with how it looks.
I didn't think to check the page source at first, and what you've said makes sense. It's all there and searchable by search engines, which is great.
Thanks again for your help, and for making your zoom content block available.
First of all, big thanks for this block; it's very usefull.
I have a question:
How can I stop the 'close' function when clicking on the popup content?
I would like the zoom content to only closed when you click on the "X" (close button at the up left) and not on the content?
Thanks!
I have a question:
How can I stop the 'close' function when clicking on the popup content?
I would like the zoom content to only closed when you click on the "X" (close button at the up left) and not on the content?
Thanks!
I noticed the same thing as ymne when clicking on links in the content - the block closed and the link did not open. Any suggestions? (It does work if you right click it and select 'Open link in...'.)
The jquery which controls the fancyzoom function is called in the controller.php at line 44
You simply need to change the "closeOnClick: true" to "false". When you do this, clicking the box itself will not close it, therefore links are working properly. Clicking outside of the box still closes the box, i'm not sure how to change that...
$v->addHeaderItem('<script type="text/javascript" src="' . $uh->getBlockTypeAssetsURL($bt) . '/fancyzoom.js"></script>','CONTROLLER'); $v->addHeaderItem('<script type="text/javascript">$(document).ready(function() { $("a.zoomContent").fancyZoom({scaleImg: true, width:600, height:600, closeOnClick: true, directory:"'.$uh->getBlockTypeAssetsURL($bt).'/images"}); });</script>','CONTROLLER'); }
You simply need to change the "closeOnClick: true" to "false". When you do this, clicking the box itself will not close it, therefore links are working properly. Clicking outside of the box still closes the box, i'm not sure how to change that...
Ah, very smooth! The links are working perfectly. Thank you, olay!
Olay, you make my day.
Cheers!
Cheers!
Is it possible to have the width set up to auto? How?
Thanks in advance.
Thanks in advance.
I haven't tested this to see how it behaves... I originally sized it at 580px for the job i needed it for but i've no doubt this will work on auto.
Go to view.php and edit the following line:
simply change the width to "width: auto;"
Go to view.php and edit the following line:
#zoom_content { overflow: auto; width: 560px; height: 560px; padding: 20px; }simply change the width to "width: auto;"
Hi. I have unzipped and uploaded the zoom_content block files into the packages directory, but I don't get anything on the "add functionality" page of the dashboard to install. How do I use this block. My understanding is that zoom_content will allow me to add objects/text/photos into and existing content block, as a thumbnail, which the user can click to enlarge.
Have I grasped the concept of this correctly!?! I like the zoom_image block, but is limiting only being able to use one image at a time, and with no accompanying text.
Any help or advice would be appreciated.
Cheers
Andy
Have I grasped the concept of this correctly!?! I like the zoom_image block, but is limiting only being able to use one image at a time, and with no accompanying text.
Any help or advice would be appreciated.
Cheers
Andy
Hi Andy,
I think your problem will be that this is not a (finished) package – that's not to say it doesn't work but it's not packaged up as the blocks are in the market place.
To that end you need to put the unzipped "zoom content" folder into your "blocks" folder and not "packages". This should then show up in add functionality.
And yes – this would allow you to have a whole content block that zooms which might have multiple images and text, although the layout of this would all have to be within the limits of the tinyMCE editor.
I think your problem will be that this is not a (finished) package – that's not to say it doesn't work but it's not packaged up as the blocks are in the market place.
To that end you need to put the unzipped "zoom content" folder into your "blocks" folder and not "packages". This should then show up in add functionality.
And yes – this would allow you to have a whole content block that zooms which might have multiple images and text, although the layout of this would all have to be within the limits of the tinyMCE editor.
Thanks Olay I will try this, and thanks for the fast reply! I'll let you know how I get on.
Have now got the block installed and it works fine, although a photo gets stretched across the whole zoomed box.
I think I understand the functionality of this block now and it will probably be useful, however I don't think it will do fully what I was hoping. Is there any way to copy the zoom_content block into an existing content block - so a block within a block? i.e. the hyperlinked text created in zoom_content available inside a content block. Ideally what I want is to be able to use multiple thumbnails within content, with text wrapped around them, that expand when clicked.
I have used JCE editor in Joomla, which is a variation tinyMCE, that gives this functionality but I don't know whether it would work with C5.
Thanks for your help
Andy
I think I understand the functionality of this block now and it will probably be useful, however I don't think it will do fully what I was hoping. Is there any way to copy the zoom_content block into an existing content block - so a block within a block? i.e. the hyperlinked text created in zoom_content available inside a content block. Ideally what I want is to be able to use multiple thumbnails within content, with text wrapped around them, that expand when clicked.
I have used JCE editor in Joomla, which is a variation tinyMCE, that gives this functionality but I don't know whether it would work with C5.
Thanks for your help
Andy
Thank you, Olay, I was glad to stumble upon this block, installed pretty well and works well too except that it stretches the image that is added in the content.
Would like to know how "andysdp" or others resolved this issue.
Would like to know how "andysdp" or others resolved this issue.
Thank you for giving back to the C5 community, Olay - this is great!
If anybody figures out a way to enable this functionality within an existing content block, I'd love to hear your solution.
If anybody figures out a way to enable this functionality within an existing content block, I'd love to hear your solution.
I notice that at the moment the text is centred; what's the easy way to change that to, say, left aligned?
Also, since the site I'm adding this to wants to be search engine friendly, is the content in the zoom block easily accessible to search engines? Just want to be careful about what I put in there if it isn't.
Many thanks again for this great new block. I think it will come in very handy!