Jump to content


Photo
- - - - -

Bootstrap and Popover images on hover


Best Answer Danny , 03 November 2013 - 08:33 AM

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/

Go to the full post


  • Please log in to reply
11 replies to this topic

#1 pagerun

pagerun

    Advanced Member

  • Members
  • 42 posts

Posted 02 November 2013 - 09:17 AM

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

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 November 2013 - 12:37 PM

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

Please Login or Register to see this Hidden Content

  (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.



#3 pagerun

pagerun

    Advanced Member

  • Members
  • 42 posts

Posted 02 November 2013 - 01:30 PM

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.



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 November 2013 - 02:36 PM

Okay, see

Please Login or Register to see this Hidden Content

 

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

Please Login or Register to see this Hidden Content

  says to add your code as a function.

 

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



#5 pagerun

pagerun

    Advanced Member

  • Members
  • 42 posts

Posted 02 November 2013 - 10:25 PM

Where do i find "custom scripts" ?

 

I'm not familiar with writing hooks.



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 November 2013 - 10:33 PM

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

Please Login or Register to see this Hidden Content



#7 pagerun

pagerun

    Advanced Member

  • Members
  • 42 posts

Posted 02 November 2013 - 10:41 PM

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



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 November 2013 - 10:46 PM

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



#9 pagerun

pagerun

    Advanced Member

  • Members
  • 42 posts

Posted 03 November 2013 - 07:38 AM

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.



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 17533 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 November 2013 - 08:33 AM   Best Answer

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 - 

Please Login or Register to see this Hidden Content



#11 pagerun

pagerun

    Advanced Member

  • Members
  • 42 posts

Posted 03 November 2013 - 09:02 AM

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



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 17533 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 November 2013 - 09:31 AM

No problem.