Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

(Tip N3) photo page Fullscreen Zoom controls v6.0

Posted by George H. Compton IV on March 22, 2014 at 4:30pm in
Ning 3 Tips and Tricks

I removed the rotate feature, updated the CSS and JavaScript and combined it all into one little script for easy install.

The Fullscreen Zoom controls button will be on the upper right-hand side of the photo module. After pressed, the zoom controls will be on the upper right side of the page. See image below.

click here to see it live

or here

Fullscreen Zoom controls, image zoom v6.0

<script type="text/javascript" src="null//storage.ning.com/topology/rest/1.0/file/get/932486?profile=original.js"></script>

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

geocom, zoom, controls, image, photo

★

Votes: 1

Email me when people reply –

Replies

Jim Kinson March 22, 2014 at 5:11pm

George, I love this zoom control on the photos. Awesome tip and looks very professional. Question though, will this work on pages that are not wide screen? I am sure you have that detail figured out Blessings, Jim
- George H. Compton IV > Jim Kinson March 22, 2014 at 5:23pm
  
  You're welcome and thank you for the compliment Jim. :-) To answer your question yes it does work without widening your network. But I originally wrote it because the big empty spaces in the wider networks.
  - Jim Kinson > George H. Compton IV March 22, 2014 at 5:28pm
    
    Again, thanks. A site that I am an admin doesn't have the widescreen and why I was wondering. Great job.
    
    Blessings
Jelena March 22, 2014 at 5:56pm

wow The best ever :) I love it >>>>> George H Comtom IV <<<<<< Thank you for shared
- Jelena > Jelena March 22, 2014 at 6:04pm
  
  oh Doesnt work on my community :( I use v2
  - George H. Compton IV > Jelena March 22, 2014 at 6:35pm
    
    Hello Jelena,, :)
    I'm sorry I wrote this for Ning 3.0 but if you'd like I can get it working for Ning 2.0.
    - Jelena > George H. Compton IV March 22, 2014 at 8:21pm
      
      Dear George Im using ning 3.0 v2 :) theme > Wood Zen
      - George H. Compton IV > Jelena March 22, 2014 at 9:07pm
        
        On two of the three networks I'm testing this on our themes version 2. On one I'm using slab and on the other meteor. I just updated the zoom effect if that was the problem. If not can you please tell me what is wrong. Please :-)
        
        I just tested it in Wooden Zen and it's working perfectly you should try again with the new code.
      - George H. Compton IV > Jelena March 23, 2014 at 1:07pm
        
        I found the issue you were having on your network :-) thank you for sending me your link.
        Replace the code you have on your network now with the new ones it should work for your network and anyone else that has changed the lead-in to the photo pages..
Noémi Ketterer March 23, 2014 at 6:16am

Hi George.

Hope you can help me.
Choosing the theme Glossy Bossy, 1120 px wide, I put the new code to do so.


<script type="text/javascript">
x$(document).ready(function() {
var background = x$('.aboutTab-questionAndAnswer P.aboutTab-answer:contains("body")').text(); //get the text from the
x$('body').append('<style>'+background+'</style>'); //append it to the body
x$('DIV.aboutTab-questionAndAnswer:contains("body")').hide(); //hide the table row with the css
});
</script>

It's okay, they can change the background of the members. (Css)
Is it possible to change the header height on their side?
Is there a code?
If you have any ideas, I would really appreciate.

Hugs

Noémi