[For 1.8] Fancybox / "Fit on page"
#21
hello i'm stuck on step #3
using the default theme
where can i find the headerinclude template?
here is what my header templates looks like


Attached Files Thumbnail(s)
   
Reply
#22
Nope, find headerinclude template, it should be in ungrouped
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#23
(2018-07-10, 01:46 PM)Eldenroot Wrote: Nope, find headerinclude template, it should be in ungrouped

thx i found it but after i followed all the steps
nothing happens

attachment still opens in new window
https://www.blackmarke7.com/thread-33.html

embeded image opens in new window
https://www.blackmarke7.com/thread-7.html

------------------------ edit ---------------------------

nvm i'm an idiot i uploaded fancybox to a different site 

Toungue Toungue Toungue

one improvement we can add to this is we group all the image in 1 post so when we click on it we can view all of them using the arrow keys like how it is with attachment

but i'm too newb to know how..

but i think something like adding data-fancybox="$pid" to the headerinclude?

Going to post my improvement to this tutorial
you can see how it looks with my improvement here: https://www.blackmarke7.com/thread-37.html
for css i changed to
.scaleimages img {
	max-width: 60%;
	height: auto;
}

after doing the following you'll be able to open all images in 1 post with fancybox gallery
change the headerinclude lines in first post to
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.post_body img').each(function() {
        var currentImage = $(this);
        var pid = currentImage.parents('.post_body.scaleimages').attr('id');
        if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
            currentImage.wrap("<a target='_blank' data-fancybox='" + pid + "' data-type='image' href='" + currentImage.attr("src") + "'</a>");
        }
    });
});
</script>

after doing the following you'll be able to open attached images with fancybox gallery even when you set
Show Attached Thumbnails in Posts to Full Size Image

change postbit_attachments_images_image template to
<img<a target='_blank' data-fancybox="data-{$attachment['pid']}" data-type='image' href="attachment.php?aid={$attachment['aid']}"><img src="attachment.php?aid={$attachment['aid']}" class="attachment" alt="" title="{$lang->postbit_attachment_filename} {$attachment['filename']}
{$lang->postbit_attachment_size} {$attachment['filesize']}
{$attachdate}" />&nbsp;&nbsp;&nbsp;{$attachment['filename']}
{$lang->postbit_attachment_size} {$attachment['filesize']}
{$attachdate}" /></a>&nbsp;&nbsp;&nbsp;
Reply
#24
The script you add to header include is slightly wrong.
It will add a < a> when all you need is a > at the end.

Update your scripts in headerinclude with this.
This will also add mouse over text, that the image can be enlarged when clicked.

<script type="text/javascript">
$(document).ready(function() {
    $('.post_body img').each(function() {
        var currentImage = $(this);
        
        if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
            currentImage.wrap("<a title='Click to enlarge' target='_blank' data-fancybox data-type='image' href='" + currentImage.attr("src") + "'>");
        }
    });
});
</script>

Addition, I have been getting back end https: not found errors using fancybox mby this fix I did will fix that I will monitor and see.
Reply
#25
@8guawong - you reinvented a wheel. There is a working code few post above Smile anyway, good job!

@drguild - are you sure? I think the script is not broken...
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#26
(2018-07-30, 03:50 PM)Eldenroot Wrote: @drguild - are you sure? I think the script is not broken...

Yea I am sure about the changes.
The original script the end tag shouldn't be there and should just be a > as the / isn't formatted escaped properly as one of those / or < is a special character and needs escaping, that's why it will show as < a> before the next line which is the mycode image tag.

The proper </a> closing tag isn't in the script but located elsewhere.

If you look at the the code properly and know html it should be formatted as.
The script is everything before the mybb IMG code if you follow the code parameters.

<a parameters>mybb IMG code</a>

What the original code is doing is this:

<a parameters< a>mybb IMG code</a>

You can see this on the chrome inspector if you rclick and inspect on the image.

The / doesn't seem properly escaped in the script that's why it's working but is incorrectly formatted.

If that tag was formatted with the / escaped correctly it would cause this.

<a parameters</a>mybb IMG code</a>

Which isn't correct obviously.
So yes the original script had been wrong all this time as the original author thought of fully closing the tag after the href instead of the parameter section close of just > as the full tag is closed elsewhere.
My change above fixes that.

That href just before that wrong tag is the popup link not the actual mycode IMG showing code a you can see isn't referenced in that script.
Before that is data type and target parameters.

With my change to just have the > and not the </a and also the title the output will become:
Which is the correct way.

<a title="Click to enlarge" target="_blank" data-fancybox="" data-type="image" href="https://i.imgur.com/Zm2GYEw.jpg">
<img src="https://i.imgur.com/Zm2GYEw.jpg" alt="[Image: Zm2GYEw.jpg]" class="mycode_img">
</a>

So you don't need to look a few posts back here is the correct code change again I did:

<script type="text/javascript">
$(document).ready(function() {
    $('.post_body img').each(function() {
        var currentImage = $(this);
        
        if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
            currentImage.wrap("<a title='Click to enlarge' target='_blank' data-fancybox data-type='image' href='" + currentImage.attr("src") + "'>");
        }
    });
});
</script>
Reply
#27
I mean the original code, not the modified one posted few post above...
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#28
(2018-07-31, 03:06 PM)Eldenroot Wrote: I mean the original code, not the modified one posted few post above...

I was talking about the original code also.
The error should be fairly obvious to anyone that knows basic html.
To make it more clear.

From the OP first post on this thread:
You can see the end </a> clearly which is incorrect.

Quote:3. Add to headerinclude template after {$stylesheets}:


Code:
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.post_body img').each(function() {
var currentImage = $(this);

if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
currentImage.wrap("<a target='_blank' data-fancybox data-type='image' href='" + currentImage.attr("src") + "'</a>");
}

If you Chrome inspect this code this is the output:

Notice the broken a end parameter section tag before the MyBB image tag.

<a target="_blank" data-fancybox="" data-type="image" href="https://i.imgur.com/Zm2GYEw.jpg"< a>
<img src="https://i.imgur.com/Zm2GYEw.jpg" alt="[Image: Zm2GYEw.jpg]" class="mycode_img">
</a>

This is exactly why I posted the fixed code.

If you're still confused I'll do screenshots for your with lines to each parameter so you can see how this code actually works.



Because Eldenroot couldn't see what I meant with the change and to make it more clear to others that the original code has a error despite it working here is screenshots of the script broken down with the error shown in chrome developer tools.

This is the original script, authors post 1's section 3 add to headerinclude.
I have circles how function translates to the output.
The wrong code the author had I circled in blue and how it outputs you can see a / is missing that is as I said earlier it's to do with the javascript and special character escaping which is why it ended up working.
I also underlined the real end tag with a black line which isn't in the header include script and you can see is after the mybb img code.

[Image: pSPba75.png]

This is a fixed code I just highlighted the change and how it outputs as well as the additional title I added.
You can see there is no broken a tag at the end of the first line now and the parameter section is escaped > cleanely without it being a broken end tag.

[Image: QFhoCUw.png]

Now I would have hoped by my posts above it would have been easy for you to see and fix without getting confused or thinking the original code was fine and there was no error in it, but I know now I need to explain things even clearer with images and explanations as people won't understand just trying to mention it.

If these images are still confusing for you guys to see the fix I did please let me know and I will again try to make it simpler to understand.

Now I only happen to pick it up a month or two after implementing the code because I wanted to modify it to add a title parameter for mouse over and that's when I found the error.

All we need is the op or a admin to edit the first post with the correct tag so other people have the correct coding.
Reply
#29
We misunderstood slightly... Nevermind, you are talking about different thing
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)