We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 36610
    • 7 Posts
    On my site I want my articles to have multiple images that each popup with mouse click.
    I try to do this:

    text
    text
    {{popup}}
    text
    text
    text
    {{popup}}
    etc

    However each successive {{popup}} is just a duplicate of the first...so I see all the images stacked on top of each other rather than separate individual images.

    Is there a way to get around this in MODx Evolution?
    Go here http://www.hardmarque.com/ to see what I'm talking about.
    Can only get first image to pop up...want second one to as well.

    Thanks in advance
      • 3749
      • 24,544 Posts
      What does your popup chunk look like?
        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
        • 36610
        • 7 Posts
        Not sure. Total noob here. What directory do I search in?

        This is the CSS for the content.

        <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6em; color: #939393;">Why are manual transmission cars so much more fun to drive than
        automatics?  It has to do with
        energy, and somehow being able to physically connect with energy, the energy of
        a car. It also has to do with control and specifically the exhilaration of
        being able to control mechanical power. Control is important, it is a learned
        skill. Control is freedom. It’s mind over matter, the ability to exert the will
        and make manifest its desires in the physical. With cars it's about empowerment
        through physical control of the machine, the thrill and sense of accomplishment
        that comes from successfully organizing bodily motor skills to produce large
        amounts of kinetic energy.</p>
        <p>{{popup2}}
        </p>
        <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6em; color: #939393;">There’s no denying that Lamborghini’s new
        flagship model Aventador is an impressive looking beast. The car is aggressive but it is
        also
        highly refined in the way it
        brings
        its many lines
        together into a taut, resolved, and elegantly detailed shape. As far as aesthetics go the
        Aventador is the perfect next-decade iteration of Lamborghini’s
        distinctive style. </p>
          • 36610
          • 7 Posts
          Second image on page is just inserted btw...I tried to make it popup but it failed.
            • 28042 ☆ A M B ☆
            • 24,524 Posts
            {{popup}} is a chunk (Elements->Manage elements, the Chunks tab). Chunks are just small chunks of HTML code (they originally were called htmlsnippets, and the database table that contains the chunk's name and content still has the table name site_htmlsnippets), and the chunk's content will be inserted into the document's content wherever the chunk tags are put, whether in a document's content or a template. It will not change.

              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
              • 36610
              • 7 Posts
              Ok it could be this:

              assets/snippets/maxigallery/templates
              <div class="managepicturecontainer">
              	<input type="hidden" name="[+maxigallery.fieldnames.pictureid+]" value="[+maxigallery.picture.id+]"/>
              	<input type="hidden" name="[+maxigallery.fieldnames.modified+]" id="[+maxigallery.fieldnames.modified+]" value="no"/>
              	<div class="managepicture">
              		<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" target=_new>
              			<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" alt="[+maxigallery.strings.click_to_zoom+]"/>
              		</a>
              	</div>
              	<div class="shortfields">
              		ID: [+maxigallery.picture.id+]
              		<br />
              		[+maxigallery.strings.delete+]:
              		<input type="checkbox" name="[+maxigallery.fieldnames.delete+]" value="yes" title="[+maxigallery.strings.check_to_delete_this_picture+]"/>
              		<br />
              		[+maxigallery.strings.hide+]:
              		<input type="checkbox" name="[+maxigallery.fieldnames.hide+]" value="yes" title="[+maxigallery.strings.check_to_hide_this_picture+]" onClick="document.editform.[+maxigallery.fieldnames.modified+].value='yes'" [+maxigallery.picture.hide:is=`1`:then=`checked="checked"`+]/>
              		<br />
              		[+maxigallery.strings.position+]:
              		<input type="text" size="3" name="[+maxigallery.fieldnames.position+]" id="[+maxigallery.fieldnames.position+]" onKeyDown="document.editform.[+maxigallery.fieldnames.modified+].value='yes'" value="[+maxigallery.picture.pos+]"/>
              	</div>
              	<br class="clearboth"/>
              	[+maxigallery.strings.title+]:
              	<br/>
              	<textarea name="[+maxigallery.fieldnames.title+]" rows="2" cols="40" onKeyDown="document.editform.[+maxigallery.fieldnames.modified+].value='yes'">[+maxigallery.picture.title:htmlent+]</textarea>
              	<br />
              	[+maxigallery.strings.description+]:
              	<br/>
              	<textarea name="[+maxigallery.fieldnames.description+]" rows="4" cols="40" onKeyDown="document.editform.[+maxigallery.fieldnames.modified+].value='yes'">[+maxigallery.picture.descr:htmlent+]</textarea>
              	<br />
              	<hr />
              </div>


                • 36610
                • 7 Posts
                Or it could be this:
                [+maxigallery.config.display:is=`pictureview`:then=`
                	[+maxigallery.managebutton:isnot=``:then=`
                
                		<center>[+maxigallery.managebutton+]</center>
                		<br />
                	
                	`+]
                `+]
                
                <div class="picturecontainer">
                
                	<p class="navigation">
                		[+maxigallery.counter:is=`1`:or:is=`0`:then=`
                
                			[+maxigallery.strings.previous+] |
                
                		`:else=`
                
                			<a href="[+maxigallery.previous_pic_url+]" alt="[+maxigallery.index_url+]">[+maxigallery.strings.previous+]</a> | 
                
                		`+]
                
                			<a href="[+maxigallery.index_url+]" alt="[+maxigallery.index_url+]">[+maxigallery.strings.index+]</a> | 		
                
                		[+maxigallery.counter:is=`[+maxigallery.total_pics_count+]`:then=`
                
                			[+maxigallery.strings.next+]
                
                		`:else=`
                
                			<a href="[+maxigallery.next_pic_url+]">[+maxigallery.strings.next+]</a>
                
                		`+]
                	</p>
                
                	<p class="picturecount">[+maxigallery.strings.picture+] [+maxigallery.counter+] / [+maxigallery.total_pics_count+]</p>
                
                	[+maxigallery.total_pics_count:isnot=`0`:then=`
                	
                	<div class="picture">
                	
                	[+maxigallery.big_img_linkstyle:is=`slidebox`:then=` 
                
                		<a href="[(base_url)][+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+]" rel="lightbox" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]">
                
                	`+]
                
                	[+maxigallery.big_img_linkstyle:is=`lightboxv2`:then=` 
                
                		<a href="[(base_url)][+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+]" rel="lightbox" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]">
                
                	`+]
                
                	[+maxigallery.big_img_linkstyle:is=`slimbox`:then=` 
                
                		<a href="[(base_url)][+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+]" rel="lightbox" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]">
                
                	`+]
                
                	[+maxigallery.big_img_linkstyle:is=`popup`:then=` 
                
                		<a href="javascript:void(0);" onClick="javascript:openWindow('[(base_url)][+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+]','[+maxigallery.picture.title:htmlent+]',[+maxigallery.picture_height_big+],[+maxigallery.picture_width_big+],'gallery');" title="[+maxigallery.strings.click_to_open_original+]">
                
                	`+]
                
                	[+maxigallery.big_img_linkstyle:is=`external`:then=` 
                
                		<a href="[(base_url)][+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+]" rel="external" title="[+maxigallery.strings.click_to_open_original+]">
                
                	`+]
                
                	[+maxigallery.keep_bigimg:is=`0`:then=`
                
                		<a href="[+maxigallery.index_url+]" title="[+maxigallery.strings.click_to_go_back+]">
                
                	`+]
                
                		<img src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="imageview" alt="[+maxigallery.strings.date+] : [+maxigallery.picture.date+]" />
                
                		</a>
                		
                	</div>
                	
                	`+]
                	
                	[+maxigallery.picture.title:isnot=``:then=`
                		<p class="title">[+maxigallery.picture.title:htmlent+]</p>
                	`+]
                	[+maxigallery.picture.descr:isnot=``:then=`
                		<p class="description">[+maxigallery.picture.descr:htmlent+]</p>
                	`+]
                	
                </div>