The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Lightbox effect to the images

View previous topic View next topic Go down

Solved Lightbox effect to the images

Post by flapflap on 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
avatar
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 Justice™ on 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
Justice™
Forumember

Posts : 515
Reputation : 117
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Lightbox effect to the images

Post by flapflap on 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...

avatar
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 Justice™ on July 16th 2017, 11:02 am

Yes, it's possible, but I'll need your forum's link.
avatar
Justice™
Forumember

Posts : 515
Reputation : 117
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Lightbox effect to the images

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

Here u go, fella.
http://fliper4o.forumotion.net/
Thank you for the help!
avatar
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 Justice™ on 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
Justice™
Forumember

Posts : 515
Reputation : 117
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Lightbox effect to the images

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

Thanks!
works fine Smile
avatar
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 on July 16th 2017, 3:09 pm

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


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1713
Reputation : 223
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

View previous topic View next topic Back to top


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