The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Lightbox effect to the images

2 posters

Go down

Solved Lightbox effect to the images

Post by flapflap July 16th 2017, 9:07 am

Can somebody help me to update this Add a lightbox effect to the images of the forum ! by @Shadow
The version of it is fancyBox - jQuery Plugin version: 2.0.6 (16/04/2012)
How can I get & install the latest version on ModernBB ?
  • Image gallery
  • Iframe (75% width and height)
  • Non existing image
  • Non existing url
  • Google maps (iframe)
  • Youtube (iframe)

If you can guide me from where I get the code & edit(add some features like the above) css & js.
Or you can just help me with the code if it's easier for you,
Thank you Smile


Last edited by flapflap on July 16th 2017, 1:56 pm; edited 1 time in total
flapflap
flapflap
New Member

Posts : 9
Reputation : 1
Language : English

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Lightbox effect to the images

Post by Guest July 16th 2017, 10:07 am

Hi,

From what I know, fancybox only works for images, not iframes or links. For images, follow the steps below:
1.Template overall_header edits
Look for this code:
Code:
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
Replace it with this:
Code:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
This replaces the default jquery version(which is oure.tdated) with the latest version and it adds the fancybox javascript and css. If you can't find that code, then post the overall_header template he


Step 2:Add the following js code with placement on all pages:
Code:
$(function(){
var img=$("img"), len=img.length, i=0;
for(i;i<len;i++){
img.eq(i).wrap("<a data-fancybox=\"gallery\" href=\""+img.eq(i).attr("src")+"\"></a>")
};
});

Now you should be able to use fancybox everywhere.
avatar
Guest
Guest


Back to top Go down

Solved Re: Lightbox effect to the images

Post by flapflap July 16th 2017, 10:51 am

Works fine so far, but is it possible not to look at all the pictures n the web page, just on the topic?
Even I've placed js on 'topics only' but...
Lightbox effect to the images Untitl10
flapflap
flapflap
New Member

Posts : 9
Reputation : 1
Language : English

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Lightbox effect to the images

Post by Guest July 16th 2017, 11:02 am

Yes, it's possible, but I'll need your forum's link.
avatar
Guest
Guest


Back to top Go down

Solved Re: Lightbox effect to the images

Post by flapflap July 16th 2017, 11:24 am

Here u go, fella.
http://fliper4o.forumotion.net/
Thank you for the help!
flapflap
flapflap
New Member

Posts : 9
Reputation : 1
Language : English

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Lightbox effect to the images

Post by Guest July 16th 2017, 1:14 pm

Replace the JS code with this:
Code:
$(function(){
var img=$(".postbody>.content img"), len=img.length, i=0;
for(i;i<len;i++){
img.eq(i).wrap("<a data-fancybox=\"gallery\" href=\""+img.eq(i).attr("src")+"\"></a>")
};
});
avatar
Guest
Guest


Back to top Go down

Solved Re: Lightbox effect to the images

Post by flapflap July 16th 2017, 1:55 pm

Thanks!
works fine Smile
flapflap
flapflap
New Member

Posts : 9
Reputation : 1
Language : English

http://fliper4o.forumotion.net/

Back to top Go down

Solved Re: Lightbox effect to the images

Post by Draxion July 16th 2017, 3:09 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum