Hi,

i'm making a plugin for a website that dynamicaly add's modals to a webpage for a portfolio. Now it has alot of pictures so i'm trying to lazyload the pictures. I'm using bootstrap carousel and i've added in the asset folder of the component a javascript file. Now i'm trying to use a twig variable in this file but don't know how. Here's what i've tried: this is the javascript:

    $('#portfolioModal{{ project.id }}').on('slid.bs.carousel', function (e) {
         var $nextImage = $('.active.item', this).next('.item').find('img');
        $nextImage.attr('src', $nextImage.data('lazy-load-src'));
    });

this is the modal

{% set projects = __SELF__.projectslist %}

{% for project in projects %}
<div class="portfolio-modal modal fade" id="portfolioModal{{ project.id }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
        <div class="lr">
            <div class="rl">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <div class="modal-body">
                    <!-- Project Details Go Here -->
                    <h2>{{ project.title }}</h2>
                    {% if project.featured_images.count > 0 %}
                        <div id="myCarousel{{ loop.index }}" class="carousel slide">

                            <!-- Indicators -->

                            <div class="carousel-inner">
                                {% for image in project.featured_images %}
                                    {% if loop.index == 1 %}
                                        <div class="item active">
                                                <img src="{{ image.path }}">
                                        </div>
                                    {% else %}
                                        <div class="item">
                                                <img data-lazy-load-src="{{ image.path }}">
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>

                            <!-- Controls -->
                            <a class="left carousel-control" href="#myCarousel{{ loop.index }}" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>

                            <a class="right carousel-control" href="#myCarousel{{ loop.index }}" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    {% endif %}

                    <p>{{ project.caption }}</p>
                    <p class="ProjectContent">{{ project.content|raw }}</p>
                    <ul class="list-inline">
                    </ul>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{% endfor %}

Last updated 8 years ago

remember that twig is a php script, so this means it is not going to be dinamic on runtime like js is, so this will result in the variable just being overwritten until the for loop stops, so you'll get as a result only the last portfolio working, some workarounds maybe scripting this as an array for js, or sending it via ajax in json encoding

Thanks for the answer. I'm going to try it with an array. One last question how can i access the array i make in twig in js?

Edit: I've got a working solution with the jquery selector like this

$('[id^="myCarousel"]').on('slid.bs.carousel', function (e) {
     var $nextImage = $('.active.item', this).next('.item').find('img');
    $nextImage.attr('src', $nextImage.data('lazy-load-src'));
});

Last updated 8 years ago

You could pass the twig variable as a data attribute?