Question

It’s the same effect but 4 different zoom elements. How do I simplify this code?

<script>
        $(document).ready(function(){
            $('.etalage').etalage({
                show_hint: false,
                thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });

It’s the same effect but 4 different zoom elements. How do I simplify this code?

        $(document).ready(function(){
            $('.etalage2').etalage({
                show_hint: false,
                    thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element2',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });

It’s the same effect but 4 different zoom elements. How do I simplify this code?

    $(document).ready(function(){
            $('.etalage3').etalage({
                show_hint: false,
                    thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element3',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });    

    $(document).ready(function(){
            $('.etalage4').etalage({
                show_hint: false,
                    thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element4',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });


    </script>

Answer 1

Simple for will do it:

 $(document).ready(function(){
     for(var i=1; i <= 4; ++i){
        $('.etalage'+(i===1 ? '':i)).etalage({
            show_hint: false,
            thumb_image_width: 470,
            thumb_image_height: 470,
            source_image_width: 1000,
            source_image_height: 1000,
            zoom_element: '#custom_zoom_element'+(i===1 ? '':i),
            //source_image_height: 480,
            //source_image_width: 480,
            zoom_area_width: 470,
            zoom_area_height: 470
        });
     }
});