Bootstrap-table: Other scripts does not work within bootstrap-table.js

[typo3ua]

Other scripts for example PhotoSwipe.js does not works within bootstrap-table.js

I add to bootstrap-table in the detailFormatter few images and use PhotoSwipe.js for open up image like lightbox but it is does not works... outside bootstrap-table.js works ... within bootstrap-table.js does not works

no error, no message just not work.

How be in this case?

[UtechtDustin]

Please provide us an example using our editor.

[typo3ua]

Thank you for reply!

yeah i prepare it as package for upload because i don't know how add other js in online editor

[UtechtDustin]

@typo3ua Please dont use a upload, the editor was build for better/faster support!
You can add other js/css as in all other html pages (using the style/script html tag).

[typo3ua]

I did it

https://live.bootstrap-table.com/code/typo3ua/4223

[UtechtDustin]

The problem is that you initialize the Plugin before the images are loaded (which means that phtoswipe dont know that this images exists), which also means you have to use the onExpandRow Event.
Within that event you initialize or adds the images.

[typo3ua]

I have no idea how to use this... please, can you help me to do it on this example https://live.bootstrap-table.com/code/typo3ua/4223?

[UtechtDustin]

Sorry, but i dont understand that plugin.
It's confusing me, do you exactly need this plugin ?

[typo3ua]

It's confusing me, do you exactly need this plugin ?

Yes, he needs me, I use him for open up image at window as lightbox. He is very simple for me in install and config...

I think it is need not only me ... it is need and another users your software...

Sorry, but i dont understand that plugin.

if you as guru JS do not know how, then i exactly can not to do it myself :(

I need your help, please...

[UtechtDustin]

Yea i dont know it, because in my opinion the the plugin design is not that good.
So you need exactly PhotoSwipe and cant use lightbox or a similar plugin ?

[typo3ua]

Yea i dont know it, because in my opinion the the plugin design is not that good.

Why...? in this plugin the design can be changed...

So you need exactly PhotoSwipe .... ?

Yes!...
I made it for Local government in Ukraine with the bootstrap (for example used too ), is there the PhotoSwipe already adapted in bootstrap and plus your plugin bootstrap-table (all bootstrap)

... and cant use lightbox or a similar plugin?

What do you mean a similar plugin? do you know the better plugin?

[UtechtDustin]

Why...? in this plugin the design can be changed...

I dont mean the design which you can see as user. I mean e.g. how you initinalise it with javascript.

Yes!...
What do you mean a similar plugin? do you know the better plugin?

Okay if you really need that plugin and you cant use a other one e.g. lightbox then i cant help you.
The way how that plugin is weired, e.g. you need a lot of html to ininalise that plugin.
Maybe @wenzhixin or @djhvscf could help.

[typo3ua]

i cant help you.

:(

...a other one e.g. lightbox ...

Do you have ready example for e.g. lightbox?

[typo3ua]

Guys @wenzhixin and @djhvscf , can you help me? I need your help.... PLEASE

[UtechtDustin]

Sure for lightbox its pretty easy as you only need the data attribute.
https://live.bootstrap-table.com/code/UtechtDustin/4244

[typo3ua]

I changed something and made a more easily ... but inside bootstrap-table.js still does not works

https://live.bootstrap-table.com/code/typo3ua/4245

[wenzhixin]

@typo3ua Working example: https://live.bootstrap-table.com/code/wenzhixin/4246

[typo3ua]

wow ... you are real GURU... thank you a lot...

[wenzhixin]

You are welcome!

[typo3ua]

@wenzhixin sorry!

I can not to adapt your JS - https://live.bootstrap-table.com/code/wenzhixin/4246

...in my the construction - https://live.bootstrap-table.com/code/typo3ua/4223

I tried it to add after 151 line

function onExpandRow(index, row, $detail) {
  var items = [];
  items[index] = []
  $images.find('figure').each(function(){
    var $link = $(this).find('a')
    items.push({
        src: $(this).attr('href'),
        title: title,
        w: $(this).data('lightbox-width'),
        h: $(this).data('lightbox-height'),
        caption: caption.replace(/(?:\r\n|\r|\n)/g, '<br />'),
        pid: $(this).index('a.lightbox[data-lightbox-group=' + gid + ']'),
    });
  })
}

$(document).on('click', '.lightbox', function(event){
  event.preventDefault();
  var index = $(this).closest('.detail-view').prev().data('index')
  if(items.length > 0) {
    var gallery = new PhotoSwipe(photoswipeContainer, PhotoSwipeUI_Default, items[index], options);
    gallery.init();
  }
});

.... https://live.bootstrap-table.com/code/typo3ua/4267

but it is does not work

[UtechtDustin]

Sorry but we cant help for every basic javascript problem.
You should hire someone who can work with javascript or you should learn it.

Check the difference between your item variable and the variable container from @wenzhixin example.
Its a issue of the scope, your variable will be filled but cant be used outside of the scope.

Example (check the console): https://live.bootstrap-table.com/code/UtechtDustin/4268

[typo3ua]

I am as beginner made it ... https://live.bootstrap-table.com/code/typo3ua/4275

... but I think I need correction... if you not hard :)

[typo3ua]

this is what i wanted https://live.bootstrap-table.com/code/typo3ua/4303

images where data from JS everything good... but images where data from HTML is not good

I did that what i needed but I have some issues with images in the table data from HTML

Guys @wenzhixin and @djhvscf , I need your help.... please

[wenzhixin]

https://live.bootstrap-table.com/code/wenzhixin/4326
@typo3ua