Add a javascript for posts

Question

I dont know anything about Javascript. I'm using Ignite theme in Wordpress. I tried to add a lightbox gallery in my site: http://dimsemenov.com/plugins/magnific-popup/ > the "Zoom-gallery" example

So I put the html code in the post, the CSS in style.css, but I dont know where I have to put the javascript. I tried to past it (between script tags) inside the content-page.php, content.php, header.php, or footer.php but it didn't work.

HTML

<div class="zoom-gallery">
    <a href="http://farm4.staticflickr.com/3763/9204547649_0472680945_o.jpg" data-source="http://500px.com/photo/32736307" title="Into The Blue" style="width:193px;height:125px;">
        <img src="http://farm4.staticflickr.com/3763/9204547649_7de96ee188_t.jpg" width="193" height="125">
    </a>
    <a href="http://farm3.staticflickr.com/2856/9207329420_7f2a668b06_o.jpg" data-source="http://500px.com/photo/32554131" title="Light Sabre" style="width:82px;height:125px;">
        <img src="http://farm3.staticflickr.com/2856/9207329420_e485948b01_t.jpg" width="82px" height="125">
    </a>
</div>

CSS

.image-source-link {
    color: #98C3D1;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
        opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
        opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

JAVASCRIPT

$(document).ready(function() {
    $('.zoom-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        closeOnContentClick: false,
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        image: {
            verticalFit: true,
            titleSrc: function(item) {
                return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
            }
        },
        gallery: {
            enabled: true
        },
        zoom: {
            enabled: true,
            duration: 300, // don't foget to change the duration also in CSS
            opener: function(element) {
                return element.find('img');
            }
        }

    });
});

Ashot · Accepted Answer · 2015-08-29 20:50:42Z

2

Find actual theme folder . There should be folder called "js" if not crate it put this script into some js file in that "js" folder and include it in file called index.php in same directory.

answered Aug 29, 2015 at 20:50

Ashot

1,3091 gold badge12 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

edou777 Over a year ago

Thats ok I just installed Notpad++ and now its working. So do I have to add the script between <script> tags or alone in my test.js file? Also I dont get this: "and include it in file called index.php in same directory"

Ashot Over a year ago

No you needn't . just put ready function into that js file save it and include into index.php using script tag.

edou777 Over a year ago

It doesn't work. I probably did something wrong. I created a js file inside js folder, put the javascript, saved it. Then found the index.php which is in "Ignite" folder and put the script between script tags at the end of the file and saved it

Ashot Over a year ago

@edou777 make sure that js file was included successful. In chrome open dev console and look for 404 errors.Or look page source .

edou777 Over a year ago

Ok thats what I didn t get in your first answer. What do you mean by "include" js file in index.php?? What I did was just past the javascript at the end of the index.php file.

|

Collectives™ on Stack Overflow

Add a javascript for posts

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related