problem with jquery
  • Vote Up0Vote Down George HadjichristofiGeorge Hadjichristofi
    Posts: 85Member
    hello,

    i put the article-gallery.tpl on set_thejournal temblate
    and
    <script type="text/javascript" src="{{ url static_file='_js/jquery.mousewheel-3.0.4.pack.js' }}"></script>
      <script type="text/javascript" src="{{ url static_file='_js/jquery.fancybox-1.3.4.pack.js' }}"></script>
      <script type="text/javascript" src="{{ url static_file='_js/jquery.easing-1.3.pack.js' }}"></script>
      <link rel="stylesheet" type="text/css" href="{{ url static_file='_css/fancybox/fancybox.css' }}" media="screen" />

    i see the image but they don't see like fancybox zoom
    why?


  • 11 Comments sorted by
  • Vote Up0Vote Down ljuba rankovicljuba rankovic
    Posts: 156Member
    Hi,
    you should put <a href="#" class="trigger_class">...</a> tags around your image, and apply class that triggers fancybox, the one defined in the script.
    --
    Ljuba Rankovic
    Senior Front End Developer, Sourcefabric
    ljuba.rankovic@sourcefabric.org

    http://www.sourcefabric.org
    http://www.twitter.com/Sourcefabric
  • Vote Up0Vote Down George HadjichristofiGeorge Hadjichristofi
    Posts: 85Member
    i have this
     <div class="image-gallery-container">
          <h3>Article Gallery</h3>
          {{/if}}
          {{if $gimme->image->article_index > 2}}
            <a href="{{uri options="image"}}" rel="gallery" class="gallery_thumbnail" title="{{$gimme->image->description|escape}}">
              <img src="{{uri options="image height 120"}}" alt="{{$gimme->image->description|escape}}" height="120" />
            </a>
          {{/if}}
          {{if $gimme->current_list->at_end}}
        </div>

  • Vote Up0Vote Down ljuba rankovicljuba rankovic
    Posts: 156Member
    aha, ok.. it means that fancybox gallery will be triggered if your article has image attached with the number >= 3. Try to attach some more images to some article and see what happens
    --
    Ljuba Rankovic
    Senior Front End Developer, Sourcefabric
    ljuba.rankovic@sourcefabric.org

    http://www.sourcefabric.org
    http://www.twitter.com/Sourcefabric
  • Vote Up0Vote Down George HadjichristofiGeorge Hadjichristofi
    Posts: 85Member
    please check this
  • Vote Up0Vote Down ljuba rankovicljuba rankovic
    Posts: 156Member

    But fancybox plugin and other files are not loaded, they don't exist in page source. where did you call these:


    <script type="text/javascript" src="{{ url static_file='_js/jquery.mousewheel-3.0.4.pack.js' }}"></script>
      <script type="text/javascript" src="{{ url static_file='_js/jquery.fancybox-1.3.4.pack.js' }}"></script>
      <script type="text/javascript" src="{{ url static_file='_js/jquery.easing-1.3.pack.js' }}"></script>
      <link rel="stylesheet" type="text/css" href="{{ url static_file='_css/fancybox/fancybox.css' }}" media="screen" />

    ? Check if it is included in header or footer template

    --
    Ljuba Rankovic
    Senior Front End Developer, Sourcefabric
    ljuba.rankovic@sourcefabric.org

    http://www.sourcefabric.org
    http://www.twitter.com/Sourcefabric
  • Vote Up0Vote Down George HadjichristofiGeorge Hadjichristofi
    Posts: 85Member
    i have only at article-gallery.tpl
        {{ list_article_images }}
        {{if $gimme->current_list->count > 2}}
          {{if $gimme->current_list->at_beginning}}
    <div class="block">
      <script type="text/javascript" src="{{ url static_file='_js/jquery.mousewheel-3.0.4.pack.js' }}"></script>
      <script type="text/javascript" src="{{ url static_file='_js/jquery.fancybox-1.3.4.pack.js' }}"></script>
      <script type="text/javascript" src="{{ url static_file='_js/jquery.easing-1.3.pack.js' }}"></script>
      <link rel="stylesheet" type="text/css" href="{{ url static_file='_css/fancybox/fancybox.css' }}" media="screen" />
        <script type="text/javascript">
        $(document).ready(function(){

        $("a.gallery_thumbnail").fancybox({
          type: 'image',
          titlePosition: 'inside',
          transitionIn: 'none',
          transitionOut: 'none',
          centerOnScroll: 'true'

        });
        $("a.gallery_thumbnail").live("mouseenter",function(){$(this).animate({opacity:1},200);});
        $("a.gallery_thumbnail").live("mouseleave",function(){$(this).animate({opacity:0.8},200);});

        });
        </script>
        <div class="image-gallery-container">
          <h3>Article Gallery</h3>
          {{/if}}
          {{if $gimme->image->article_index > 2}}
            <a href="{{uri options="image"}}" rel="gallery" class="gallery_thumbnail" title="{{$gimme->image->description|escape}}">
              <img src="{{uri options="image height 120"}}" alt="{{$gimme->image->description|escape}}" height="120" />
            </a>
          {{/if}}
          {{if $gimme->current_list->at_end}}
        </div>
    </div>
          {{/if}}
        {{/if}}
        {{/list_article_images}}
    ~                                                                                                                                                            
    ~                                                                                                                                                            
    ~                                   
    is not true this?
  • Vote Up0Vote Down ljuba rankovicljuba rankovic
    Posts: 156Member
    Your Newscoop is 3.5.3, so {{ url static_file="relative/path/to/file" }}" won't work.

    Instead of this

    {{ url static_file='_js/jquery.mousewheel-3.0.4.pack.js' }}

    try this

    {{ include file="/templates/_js/jquery.mousewheel-3.0.4.pack.js" }}

    if you have some additional subfolder under root templates folder, make sure to inlcue it in path too.
    --
    Ljuba Rankovic
    Senior Front End Developer, Sourcefabric
    ljuba.rankovic@sourcefabric.org

    http://www.sourcefabric.org
    http://www.twitter.com/Sourcefabric
  • Vote Up0Vote Down ljuba rankovicljuba rankovic
    Posts: 156Member
    Forgot to say, do the same for other files included this way, of course
    --
    Ljuba Rankovic
    Senior Front End Developer, Sourcefabric
    ljuba.rankovic@sourcefabric.org

    http://www.sourcefabric.org
    http://www.twitter.com/Sourcefabric
  • Vote Up0Vote Down George HadjichristofiGeorge Hadjichristofi
    Posts: 85Member
     <script type="text/javascript" src="{{ url static_file='/templates/set_thejournal/_js/jquery.mousewheel-3.0.4.pack.js' }}"></script>
      <script type="text/javascript" src="{{ url static_file='/templates/set_thejournal/_js/jquery.fancybox-1.3.4.pack.js' }}"></script>
      <script type="text/javascript" src="{{ url static_file='/templates/set_thejournal/_js/jquery.easing-1.3.pack.js' }}"></script>

    i put like this but they don't work.

  • Vote Up0Vote Down ljuba rankovicljuba rankovic
    Posts: 156Member
    Sorry, I wasn't clear enough -

    put like this:

    <script type="text/javascript" src="/templates/set_thejournal/_js/jquery.mousewheel-3.0.4.pack.js"></script>
      <script type="text/javascript" src="/templates/set_thejournal/_js/jquery.fancybox-1.3.4.pack.js"></script>
      <script type="text/javascript" src="/templates/set_thejournal/_js/jquery.easing-1.3.pack.js"></script>
    --
    Ljuba Rankovic
    Senior Front End Developer, Sourcefabric
    ljuba.rankovic@sourcefabric.org

    http://www.sourcefabric.org
    http://www.twitter.com/Sourcefabric
  • Vote Up0Vote Down George HadjichristofiGeorge Hadjichristofi
    Posts: 85Member
    Hello now is working
    Thank Very mach :)
Add a Comment