dimsemenov / PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent
http://photoswipe.com
MIT License
24.21k stars 3.31k forks source link

Caption: Left Justify with line breaks? #410

Closed chigrboy closed 9 years ago

chigrboy commented 12 years ago

First of all, I love photoswipe and thank you guys for making it free for all!

My question is, I need three lines of text in the caption, all left justified. Something like this:

Foo: Eat lots of cheese Bar: "Gangnam Style" has outlived it's worthiness of fad-dom Extra: Presidential debates will tell us nothing of real use

Left justify isn't as important as the ability to having a carriage return to control line breaks.

Any help on this would be greatly appreciated. Thanks!

chigrboy commented 12 years ago

So, I was able to figure out the line breaks that I needed.

But still no left alignment of text. I'll look in the photoswipe css next but if anyone knows, let me know!

For the line breaks i used info from here: https://github.com/codecomputerlove/PhotoSwipe/issues/242

Then using example 11 I added a few things here:

getImageCaption: function(el){

                        var captionText, captionEl, dataFoo, dataBar;

                        // Get the caption from the alt tag
                        if (el.nodeName === "IMG"){
                            captionText = el.getAttribute('alt'); 
                        }
                        var i, j, childEl;
                        for (i=0, j=el.childNodes.length; i<j; i++){
                            childEl = el.childNodes[i];
                            if (el.childNodes[i].nodeName === 'IMG'){
                                captionText = childEl.getAttribute('alt'); 
                                dataFoo = childEl.getAttribute('data-foo')
                                dataBar = childEl.getAttribute('data-bar')
                            }
                        }

                        // Return a DOM element with custom styling
                        captionEl = document.createElement('div');
                        captionEl.style.cssText = 'text-align:left;';
                        captionEl.appendChild(document.createTextNode(captionText));
                        captionEl.appendChild (document.createElement('br'));
                        captionEl.appendChild(document.createTextNode(dataFoo));
                        captionEl.appendChild (document.createElement('br'));
                        captionEl.appendChild(document.createTextNode(dataBar));
                        return captionEl;

                    } 
ghost commented 11 years ago

i dont understand how you got the breaks working...