Lightbox effect to the images

[flapflap]

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

[Guest]

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.

[flapflap]

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

[Guest]

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

[flapflap]

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

[Guest]

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>")
};
});

[flapflap]

Thanks!
works fine

[Draxion]

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