Lightbox effect to the images
2 posters
Page 1 of 1
Lightbox effect to the images
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 ?
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
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
Last edited by flapflap on July 16th 2017, 1:56 pm; edited 1 time in total
Re: Lightbox effect to the images
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:
Step 2:Add the following js code with placement on all pages:
Now you should be able to use fancybox everywhere.
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 -->
- 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>
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.
Guest- Guest
Re: Lightbox effect to the images
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>")
};
});
Guest- Guest
Re: Lightbox effect to the images
Problem solved & topic archived.
|
Similar topics
» Add a lightbox effect to the images of the forum !
» Lightbox - 2 problems
» Adding a GIF effect to images request..
» lightbox
» like showing images in mobile version is possible to active the links in images
» Lightbox - 2 problems
» Adding a GIF effect to images request..
» lightbox
» like showing images in mobile version is possible to active the links in images
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum