Jump to content

Archived

This topic is now archived and is closed to further replies.

pagerun

Bootstrap and Popover images on hover

Recommended Posts

pagerun    0
pagerun

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pagerun    0
pagerun

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
Rob    547
Rob

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?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pagerun    0
pagerun

Where do i find "custom scripts" ?

 

I'm not familiar with writing hooks.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pagerun    0
pagerun

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pagerun    0
pagerun

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
Danny    1,327
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pagerun    0
pagerun

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
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×