Developing (v7+)

Flickr Photo Gallery with lightbox

Permalink 1 user found helpful December 14, 2010 at 3:59 PM

Hi

I'd really love a block that automatically took the RSS feed from a flickr set and created a thumbnail gallery of that set with a lightbox when clicking on any thumbnail

I'm sure there would be quite a few people that would be prepared to pay a little bit for such a block

dwayneparton replied on Mar 31, 2011 at 5:50 pm Permalink Reply

I am currently working on a concrete5 package for flickr that integrates fancybox. I was hoping to maybe get some feed back. It's still in the development stage but it is coming along. Here is what I have so far.
http://dwayneparton.com/projects/flickrcrete...
I hope to get a working demo up soon and then release it to the concrete5 marketplace. Any feedback or feature request's are appreciated. Thanks

Peter1919 replied on Mar 31, 2011 at 6:40 pm Permalink Reply

Hi

It looks great and might be just what I am looking for

Please keep me updated on your progress, I would be happy to test the block on our website

Thanks

Peter

PS I can't see how it links to the photo on flickr which I think is a condition of flickr's T&Cs

vernb replied on Apr 12, 2011 at 12:01 pm Permalink Reply

Hi

This is not about what you are doing with Flickr but about getting a ligthbox to wokr in C5. Maybe you might have some idea how I can get prettyPhoto to work?

I am trying to make it work within the default.php page and I think it might be something to do with firing up the plugin with document.ready:

Wherever I put this...

<script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
         $("a[rel^='prettyPhoto']").prettyPhoto({theme: 'dark_rounded', opacity: 0.50});
      });
   </script>

... it just doesn't seem to work.
Or maybe it is something else that is going astray.
Any ideas would be very welcome.
Thanks

dwayneparton replied on Apr 12, 2011 at 3:49 pm Permalink Reply

I have added fancy box to a theme before. Here is what I did in the head section of the template.

<?php Loader::element('header_required'); ?>
<script type="text/javascript" src="<?=$this->getThemePath()?>/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
      $(document).ready(function() {
         $("a.slideshow").fancybox({
            'transitionIn'   : 'elastic',
            'transitionOut'   : 'elastic',
            'type'      : 'iframe'
            });
      });
</script>
</head>

Maybe that will help give you a start. Also what you might check is if you have 2 jquery versions in the head of the theme as they could be conflicting. Concrete5 includes jquery automatically (at least in my themes, I am not 100% sure it does with all). Anyways, that was a problem I ran into when I first tried to add fancybox to a theme.

I'll try to see if I can find any more stuff out. But for now, I hope this helps

vernb replied on Apr 13, 2011 at 10:25 am Permalink Reply

Hi Dwayne

I really appreciate your help but it hasn't worked and I have tried so many things I'm at a loss to know what to do. There has to be something I am missing here!!!!!

I have bundled everything into default.php and skipped the header.php loading. Here is my default page minus all the irrelevant stuff:

<?php 
defined('C5_EXECUTE') or die(_("Access Denied."));
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style>
<?php Loader::element('header_required'); ?>
<script type="text/javascript" src="<?=$this->getThemePath()?>/js/fancybox/fancyboxjs.js"></script>
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/js/fancybox/fancyboxcss.css" media="screen" />
<link href="<?php echo $this->getThemePath()?>/butterfliescss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/menuslider.js"></script>
<script type="text/javascript">

Viewing 15 lines of 29 lines. View entire code block.

 
<?php 
defined('C5_EXECUTE') or die(_("Access Denied."));
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
 
 
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style>
 
 
<?php Loader::element('header_required'); ?>
 
 
<script type="text/javascript" src="<?=$this->getThemePath()?>/js/fancybox/fancyboxjs.js"></script>
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/js/fancybox/fancyboxcss.css" media="screen" />
 
<link href="<?php echo $this->getThemePath()?>/butterfliescss.css" rel="stylesheet" type="text/css" />
 
 
 
<script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/menuslider.js"></script>
 
 
 
<script type="text/javascript">
$(document).ready(function() {
 
   /* This is basic - uses default settings */
 
   $("a#single_image").fancybox();
 
 
});
</script>
 
</head>
<body>
<div id="outer">
  <div id="wrapper">
 
     <a id="single_image" href="http://localhost/conc/images/boat.jpg" title="A boat">BBBBOOOOAAAATTTT</a>
      </div>
 
</div>
</body>
 
</html>

On the full page I have 3 content blocks set up.
I have swapped prettyPhoto for fancybox and set it up in the site outside of C5 where it works perfectly.

I did wonder if my menuslider.js might be interfering with the lightbox and still no joy when I removed it.

There has to be answer somewhere!

Thanks for your help
Vern

dwayneparton replied on Apr 13, 2011 at 1:41 pm Permalink Reply 1 Attachment

I created a little demo for you. Maybe it will help you find the problem. I basically used the same script you have. The only thing I could think that went wrong in your script was maybe the location to the fancy box files. See if this demo works for you. I added prettyPhoto to it too.

vernb replied on Apr 13, 2011 at 4:09 pm Permalink Reply

Hi Dwayne

Almost there! I've tried the theme and when I activate it on my local host (XAMPP) it doesn't work but when I try it on a live installation it does! Tried on 2 test sites!

Any idea why XAMPP localhost won't play ball? It is much easier testing on localhost than a live server. Will do it if I have to!

Thanks for all your help. Without you I don;t think I would have found the root cause of the problem. Well, not this year at least!

Vern

dwayneparton replied on Apr 15, 2011 at 12:42 am Permalink Reply

Hmmm. That is wierd. I used MAMP to make that and it worked fine. I don't know that I would even know where to start. Maybe try a different browser and see if you have the same trouble.

You might also try one of these:
1.http://stackoverflow.com/questions/1595835/is-there-some-special-se...
2.http://stackoverflow.com/questions/2166689/jquery-script-not-workin...

dwayneparton replied on Apr 2, 2011 at 8:14 pm Permalink Reply

I just submitted it to the marketplace. Hopefully it will get approved and you can try it out. I worked out the known bugs and linked it back to flickr. If you get a chance check it out and let me know what you think of the modifications.

The current version will only display a photostream or a photo set in square thumbnail fashion(up to 30 per page). In the future I hope to integrate set lists, gallery lists, and galleries as well as provide an option to incorporate ajax. I really appreciate the feedback you all gave me.

dwayneparton replied on Apr 11, 2011 at 11:24 pm Permalink Reply

I just wanted to let you know that flickrcrete was approved today. :)
Please try it out and let me know what you think.
http://www.concrete5.org/marketplace/addons/flickrcrete/...
Thanks so much,
Dwayne

Peter1919 replied on Apr 12, 2011 at 8:57 am Permalink Reply

Hi

I tried installing it today, I got an API key and entered it in the correct place on the dashboard etc. But I just get this error message in the block when I try to use it:

'Fatal error: Call to undefined method SimpleXMLElement::count() in /home/falkone/public_html/packages/flickrcrete/blocks/flickrcrete/controller.php on line 107'

dwayneparton replied on Apr 12, 2011 at 11:47 am Permalink Reply

Thanks for finding this. It was a php compatibility issue. I used the SimpleXML::Count() function which I didn't realize was only compatible with php 5.3 or higher. It should be fixed now. Please let me know if you find anything else. I really appreciate it.

Forums

Developing (v7+)

Flickr Photo Gallery with lightbox

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?