• 0
Sign in to follow this  
Followers 0

Bootstrap and Popover images on hover

Question

Posted · Report post

Hi just looking for some advice.

 

I'm looking to enable popover images when hovering on thumbnail images.

 

I have discovered that it can be achieved with some bootstrap code (mentioned on stackoverflow fourm).

 

$('a[rel=popover]').popover({
html: true,
trigger: 'hover',
content: function () {
return '<img src="'+$(this).data('img') + '" />';
}
});

 

Just wondering where do I put this code?

 

Further to this, Is there any easier option? I haven't found any plugins which do this.

 

Thanks

 

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

Hi,

 

The code you provided in your first post appears to be JavaScript, all JavaScript is added to the Header Scripts area which Rob pointed out to in one of his replies. However, PageLines Framework uses a customised version of Bootstrap and therefore, that code will most likely not work or may, but with errors.

 

If you want to have your images have a popup i.e. lightbox effect, I recommend using a plugin.

 

There are a number of fancybox, lightbox effect plugins on the Wordpress plugin repository - http://wordpress.org/plugins/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

I'm not sure where you'd add such code, except in some revised format for functions.php, perhaps.

 

However, DMS already has popover options.  See http://docs.pagelines.com/tutorials/shortcodes  (scroll to Popovers)

 

Couldn't you just add the HTML for the image in the popover content area?  Or use a Lightbox plugin? There are many of those.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes, I first tried adding the HTML for the image in the popover content area, but it didn't work, it seems to only work for text.

 

Yes there are lots of lightbox plugins, but I'm not wanting lightbox effects, I'm looking for image popover on hover.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, see http://stackoverflow.com/questions/11075560/how-do-i-use-popover-from-twitter-bootstrap-to-display-an-image

 

You'd add the code you have above, wrapped in <script> and </script> tags to the Custom Code under Custom Scripts. That should make it work, provided you use the HTML format shown.

 

I've not tested this, and don't know if it works. I don't believe Twitter intended for images to be used that way.

 

This http://stackoverflow.com/questions/13604144/bootstrap-popover-image-as-content  says to add your code as a function.

 

Are you familiar with writing hooks? Do you have Hooker plugin activated?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Where do i find "custom scripts" ?

 

I'm not familiar with writing hooks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

On the DMS toolbar, select Custom.  On the left, you'll see an option tab for Custom Scripts.  Click that and paste the code wrapped in <script> tags.

 

Again, I can't be sure it will work.

 

As for hooks, I think it best that you start with reading http://docs.pagelines.com/advanced/hooks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Im not using DMS yet, I am using Pagelines Framework.  Where is customs scripts located there?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Dashboard > PageLines > Site Options > Custom Code and scroll down... there's a Custom Header Scripts section there.  Paste it there.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

i just tried all the suggestions on the stack overflow, and followed the instructions ie javascript in the custom code within script tags, but none of them worked.  Hmmm I wonder why.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ah so that is why.

 

Ok i have searched plugins with some more relevant terms and discovered a few good solutions.

 

Thanks for your help guys

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0