JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Ning 3.0 jQuery Tip - Add a "View Full Size" Link to Photos!

Hi friends!

This is my FIRST tip for the new Ning 3.0 (N3) platform. There will be MANY More!

As of today, I noticed on my N3 site that there was no View Full Size link on photos pages. So I wrote this code to add it under the photo description. If you want to add this feature on your site, please copy this code into your Custom Code box:

[EDITED 3/15/13 to make this work on Google Chrome. EDITED 3/19 so it won't throw js errors when not on photo pages.]

// Add View Full Size link to photos on Ning 3.0. By TJ at http://jQueryHelp.ning.com
var jQH_FullSizeURL = x$('.photoDetailPage-image').css('background-image');
if (typeof jQH_FullSizeURL != 'undefined') {
if (jQH_FullSizeURL.length > -1) {
jQH_FullSizeURLStart = jQH_FullSizeURL.indexOf('http')
jQH_FullSizeURL = jQH_FullSizeURL.substr(jQH_FullSizeURLStart, jQH_FullSizeURL.indexOf('?') - jQH_FullSizeURLStart);
var jQH_ViewFullSizeLink = '<a class="xg_sprite xg_sprite-view-fullsize" href="' + jQH_FullSizeURL + '" target="_blank" rel="nofollow">View Full Size</a>';
x$('.photoDetailPage-image').parent().append('<div id="jQH_UnderPhotoDescription">' + jQH_ViewFullSizeLink + '</div>');
}

}
</script>

If you have any trouble copying and pasting this code, you might want to copy and paste it from the attached TEXT file.

Feel free to style the div that holds the new link (div#jQH_UnderPhotoDescription) and/or the link itself (a.xg_sprite-view-fullsize). On my site, it didn't add the icon before the link, which does appear before the link on my 2.0 site.

If you use this tip, I would ask that you keep the comment that tells what the code does and who made it, in your custom code box. But do feel free to change or expand on this code. Just keep my comment in there and then add your own, explaining how you modified my code. THANKS!

I'd like to hear your feedback about how this worked on your site. I imagine there might be bugs or it might not work the same on other sites. This N3 is all so new, but we have to start playing with it and see what happens!

Best wishes!

"TJ"

1 member favorited this

Attachments:

ViewFullSize.txt, 1 KB

▶ Reply to This

Replies to This Discussion

Permalink Reply by Melinda Orr on March 15, 2013 at 7:06am

This is great!

▶ Reply

Permalink Reply by JenSocial on March 15, 2013 at 1:44pm

Great Ning 3.0 Tip! Thanks, TJ. =)

▶ Reply

Permalink Reply by TJ @ jQueryHelp on March 15, 2013 at 5:10pm

Thanks Melinda and Jen!

I mentioned on my site that I put up a tip here, and a few people are talking about this tip on my site as well. So for reference, here's the mention and discussion of this tip on my site:

http://jqueryhelp.ning.com/forum/topics/ning-3-0-jquery-tips

Best wishes!

"TJ"

▶ Reply

Permalink Reply by TJ @ jQueryHelp on March 15, 2013 at 7:51pm

I and another tester of this code noticed that in FF, when you click the link, the photo comes up full size in another tab, but then when you come back to the photo page with the link on it, the link is stuck in its hover color! Anyone else seeing this with this link and/or with any other link on their Ning 3.0 site?

▶ Reply

Permalink Reply by Writer Chick on March 25, 2013 at 9:49am

I'm just not seeing this work on my site. Ning has made the regular size of the photos so damned HUGE (loss of resolution, too!) that nearly all of them are all already "full size."

So, I purposely loaded up a wallpaper that an artist made. I looked at it full size in my browser first to see just how big it was. It was humongous.

Then I loaded it onto 3.0. Hit full size, and it's not showing the actual full size. It's actually SMALLER when you click full size!

▶ Reply

Permalink Reply by TJ @ jQueryHelp on March 26, 2013 at 5:15am

Thanks so much for the feedback! Could you provide a link to this test wallpaper on your site?

Thanks!

"TJ"

▶ Reply

Permalink Reply by Writer Chick on March 26, 2013 at 6:09am

Here is the link to the background as loaded:

http://writersandreaders.ning.com/graphic-art-no-regular-photos-ple...

Here is what it looks like when I hit "Full Size"

http://storage.ning.com/topology/rest/1.0/file/get/9383908?profile=...

Using Firefox.

▶ Reply

Permalink Reply by TJ @ jQueryHelp on March 27, 2013 at 3:27am

The actual image is just 721 px in width but on the page you linked to, Ning uses it as the background image of the div which has a width of 860 px so somehow the image gets zoomed to fit the div. I think this is how Ning did the "Responsive Design" - the div changes as the screen size changes and the image which is the background image for the div automatically resizes as the div resizes. I'm fairly sure that's what's happening but I need to do more research on CSS and Responsive Design :-)

Best wishes!

"TJ"

▶ Reply

Permalink Reply by Writer Chick on March 27, 2013 at 5:07am

TJ,

The actual image is larger than that. The same image is posted on my 2.0 network (Ning defaults all images down to 721 in discussion threads). And when I open it in a new tab, it shows it full size and it is WAY larger than 721. These are full screen backgrounds.

▶ Reply

Permalink Reply by TJ @ jQueryHelp on March 27, 2013 at 11:38pm

Thanks again for the feedback!

I wonder if they are doing it differently in N3 because that image that got stored on Ning is 721 by 420. "http://storage.ning.com/topology/rest/1.0/file/get/9383908?profile=original"

It would be good in a way if they do cap the size of images now when its uploaded to N3, because it is faster to load a smaller image than to load a large image and scale it down with CSS.

Do you have a link to the same image posted on your 2.0 network?

Thanks!

"TJ"

▶ Reply

Permalink Reply by Dave H Keep Smiling :-) on April 6, 2013 at 6:02am

Great work Tj, your skill with the JS has always bought forward some fantastic leaps with our websites here on Ning :)

Thank you for sharing another great one :)

▶ Reply

Permalink Reply by jQueryHelp on October 13, 2013 at 1:25am

Hi friends,

This code broke when Ning changed the way they display photos. They used to do it with photos as the background image of a div. Now they are back to using the normal img tag. So to fix this, change one line. Change:

var jQH_FullSizeURL = x$('.photoDetailPage-image').css('background-image');

to:

var jQH_FullSizeURL = x$('.photoDetailPage-image img').attr('src');

and that should fix this tip. It did for me on my N3 site.

Best wishes!

"TJ"