Photo Info (free)

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
Post Reply
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Photo Info (free)

Post by Adendum »

The Photo Info extension is now available from the main extension site - here and also from my extension demo site. The help file is also available online from the same page.

This is a CSS3 based extension from original coding work by Stu Nicholls. It works as a replacement to using jQuery and allows you to have a slide up panel with text that is also linkable. Can be used for simple text descriptions of any single or multiple images and could even be used as a menu system. This only operates correctly in CSS3 supported browsers

PLEASE READ THE HELP FILE BEFORE REQUESTING SUPPORT.

Demo of the extension
Last edited by Adendum on Fri Feb 27, 2015 3:59 pm, edited 1 time in total.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
amrajadhyaksha
 
 
Posts: 157
Joined: Thu Apr 09, 2009 2:26 am
Location: mumbai
Contact:

Re: Photo Info (free)

Post by amrajadhyaksha »

Does what it says.
However, I wonder if the Rollover Text extension which is a WWB built in extra does not do something similar?
Of course, your method must have required complicated skills that make the end result look so good, so I respect that.
Perhaps you could take a look at this
http://tympanus.net/Development/Circul ... tCarousel/
User avatar
protectourlands
 
 
Posts: 443
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Photo Info (free)

Post by protectourlands »

I really like it! Thank you for offering this one.
User avatar
zinc
 
 
Posts: 2146
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: Photo Info (free)

Post by zinc »

Great stuff!!!! But can I suggest you add a border and a caption like (Photo Info - Double Click to Edit) so at design time when it is added, it is not just a blank object.
Running WYSIWYG Web Builder since 2007...
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free)

Post by Adendum »

Bendigo,

The options in the Extension Builder offer three options:-
1. Display Text Only
2. Display Image
3. Live HTML rendering

I have elected to use Live HTML Rendering so you can see something in the box when you have added values to the properties. I do this with most of the extensions I have built as it gives you an indication of the settings you have used.

Display Text only only puts the name and builder details into the box in design view and Display Image just dumps an image in the box. I guess I could put an image in there but if you size the extension to suit the project values the image will either be stretched or clipped. So unless someone knows of a better way I think Live HTML Rendering gives you more information.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

UPDATED: Photo Info (free)

Post by Adendum »

10/11/11 : Having only realised I could do this yesterday (doh!) I have modified this extension (and all my extensions - see list below) so that the live rendering of the extension in design view is greatly improved. In many cases the design view will take on a background colour you set in the extension properties.

Updates available from the WWB extensions site and my own demo site. Remember to check out the extensions listed below.

Anything Slider
Automated ToolTip
Directory Listing
Elastic Thumbnail Menu
Image Information Panels
Image Swap Menu
Kick-Butt-Mega-Menu
Orbit Slider
Simple Horizontal Accordion
Slide Down Box Menu
Stacked Images
tab Slide Out
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free) - UPDATE

Post by Adendum »

20/02/12 : Image Content and CSS file now published to the /photoinfo folder.

You may need to re-link any images if you open a project that uses an earlier version of this extension. The earlier version also published its CSS file to a folder called CSS3. The CSS3 folder has been removed and all files are published to the /photoinfo folder.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free) - UPDATE

Post by Adendum »

Added property to enable multiple uses of the extension in a page or a project.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Photo Info (free)

Post by supersonictt »

Hello Adendum,

I was playing around with the extension yesterday, and noticed that the effects are only supported in FF. The outcome css doesn't contain -webkit-transition (for Chrome), will you add this in the future versions?
I did that manually to make it work in chrome :)
Thanks.
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free)

Post by Adendum »

supersonictt wrote:Hello Adendum,

I was playing around with the extension yesterday, and noticed that the effects are only supported in FF. The outcome css doesn't contain -webkit-transition (for Chrome), will you add this in the future versions?
I did that manually to make it work in chrome :)
Thanks.
Supersonictt,

I only used the code as supplied by the original author. If you email me the changes you've made I'll incorporate them into a new release. Or just post them here as a CODE chunk.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Photo Info (free)

Post by supersonictt »

Well, after publishing the file to a local folder, there is a Photoinfo folder, inside it, there is Photoinfo-ONE.css file with this part:

Code: Select all

.wrap i { -moz-transition: all 0.6s ease-in-out 0.0s; background: none repeat scroll 0 0 #003399; display: block; height: 200px; left: 0; opacity: 0.4; position: absolute; top: 300px; width: 300px; z-index: 1;}
.wrap p { -moz-transition: all 0.6s ease-in-out 0s; background: none repeat scroll 0 0 transparent; color: #FFFFFF; display: block; font-size: 12px; height: 200px; left: 0; line-height: 16px; margin: 0; padding: 0; position: absolute; top: 300px; width: 300px; z-index: 1;}
As you know, in order to support the transition in Chrome, the -webkit-transition should be added with the same values:

Code: Select all

.wrap i { -webkit-transition: all 0.6s ease-in-out 0.0s; background: none repeat scroll 0 0 #003399; display: block; height: 200px; left: 0; opacity: 0.4; position: absolute; top: 300px; width: 300px; z-index: 1;}
.wrap p { -webkit-transition: all 0.6s ease-in-out 0s; background: none repeat scroll 0 0 transparent; color: #FFFFFF; display: block; font-size: 12px; height: 200px; left: 0; line-height: 16px; margin: 0; padding: 0; position: absolute; top: 300px; width: 300px; z-index: 1;}
That's it :)
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free)

Post by Adendum »

I just had a look too......the original CSS file uses just -moz-, so I can add -webkit- and -o- but as far as I am aware there should be all three not just the one. -moz- handles FF, -webkit- handles Chrome and -o- handles Opera. So if you replace -moz- with webkit- I would assume that the transitions will no longer work in FF and only appear in Chrome..............

I'll add all three and do some tests. Keep you posted.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Photo Info (free)

Post by supersonictt »

Thanks a lot.
Yes, all three should be added in order to support Chrome, FF and Opera.
Take your time on that.
Thank you for taking care of it :) I really appreciate it :)
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free) - UPDATED

Post by Adendum »

17/04/12 : Added -webkit- and -o- transitions for Chrome and Opera compatibility. Latest version is now 1.0.0.7.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Photo Info (free)

Post by supersonictt »

Thanks Adendum, works great :)
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free)

Post by Adendum »

Exe Energy wrote:Can I just query when I am using that extension and preview it I only see the text when I hover over the image and not the coloured overlay panel - will I see that part when I publish or am I doing something wrong? Thanks
EE,

The extension uses CSS3 so if you are viewing that page in IE you won't get to see the same effects as if you are using a CSS3 compliant browser like Firefox of Chrome. In IE you will hove and instantly see the text but no transparent panel. Sorry - complain to Bill Gates!! :)
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free)

Post by Adendum »

EE,

I'm not sure about what you say you are experiencing. I just opened my demo page (example 1) and previewed in FF, Chrome, Safari and the dreaded IE. They all work as expected with the exception of IE which doesn't give the transition effect or any opacity - just an instant overlay of the text. In the other browsers you get the transition effects and the opacity.

Try mimicking the settings used in the demo page and see what happens, maybe you missed a setting.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
Paul McCloskey
 
 
Posts: 10
Joined: Sat Nov 08, 2014 5:56 pm
Contact:

Re: Photo Info (free)

Post by Paul McCloskey »

I LOVE this extension........however The caption panel shows but no caption! when I hover over the image both text and caption then show......how do I get the caption to show before I hover image?
User avatar
tommy888
 
 
Posts: 214
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Photo Info (free)

Post by tommy888 »

Hi Adendum,

NIce extention. I've got onl;y one question. Why doesn't the caption display beforemouse over and description shows up as in your example? If there is more than one single image (3 per page) - I don't want to use galleries, only one script applies and is send to a server, does it? Thank you for you answer.
User avatar
tommy888
 
 
Posts: 214
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Photo Info (free)

Post by tommy888 »

Somebody asked first :)
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free)

Post by Adendum »

@Paul McCloskey and @ tommy888,

It works the way you see it because that's how it was designed by Stu Nicholl. I just converted his code to a WWB extension. It is what it is in other words.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
Paul McCloskey
 
 
Posts: 10
Joined: Sat Nov 08, 2014 5:56 pm
Contact:

Re: Photo Info (free)

Post by Paul McCloskey »

Thank you very much for getting back to me............I see.......however your demo shows a caption before mouse rollover, even though I've added a caption it doesn't show until mouse rollover with the body text. I would like as in your demo. anything I can do?
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free)

Post by Adendum »

I'd need to see your project file to be able to advise.

Save just the page you are discussing as a separate project as I don't want or need any other pages. Use the demo site to email me and I'll email you back so you can then respond with an attachment.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free)

Post by Adendum »

I just created a test page and everything works fine. I am guessing that you have other extensions in use and maybe some kind of jQuery clash?

Hmmm, where did my ability to upload images go? Has Pablo removed that option now?
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free)

Post by Adendum »

I just emailed Paul McCloskey my test project.
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
BaconFries
 
 
Posts: 5327
Joined: Thu Aug 16, 2007 7:32 pm

Re: Photo Info (free)

Post by BaconFries »

Hmmm, where did my ability to upload images go? Has Pablo removed that option now?
Hi Paul yes it has been disabled for some time now due to a issue with the forum software I believe. You may have noticed Palbo is still using his Christmas image do to this.
User avatar
Adendum
 
 
Posts: 725
Joined: Fri Apr 22, 2011 4:50 pm
Location: London, UK
Contact:

Re: Photo Info (free)

Post by Adendum »

Hi Bacon,

OK, thanks for the update. Hope you are well - eyes good?
Aditerum - No longer supporting WWB extensions - refer to CJS.
Aditerum - No longer supporting WWB templates - refer to CJS.


WWB 9.4; Ext Builder 4.2; Windows 10 64bit; Intel Core i7-3770 Processor 3.40Ghz; 16.0Gb RAM
Death to Internet Explorer!
User avatar
BaconFries
 
 
Posts: 5327
Joined: Thu Aug 16, 2007 7:32 pm

Re: Photo Info (free)

Post by BaconFries »

Good as can be thanks for asking. Waiting for further surgery heres hoping it be sooner rather than later.. Hope all is well with you and that your kept busy.
Paul McCloskey
 
 
Posts: 10
Joined: Sat Nov 08, 2014 5:56 pm
Contact:

Re: Photo Info (free)

Post by Paul McCloskey »

Paul...thank you so much for this.......really appreciated...you're a star!!!
User avatar
tommy888
 
 
Posts: 214
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Photo Info (free)

Post by tommy888 »

Hi Adendum,

I tried this extention with an empty WB project and tyhere's no caption visible unfortunately. Only after moseover the caption appears with sescription. Regret because it's a great extenstion enabling.
Post Reply