Skip to content

Instantly share code, notes, and snippets.

@esperancaJS

esperancaJS/gist:8859735

Created February 7, 2014 09:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save esperancaJS/8859735 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save esperancaJS/8859735 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<div id="pmodal-instagram">
<div class="instagram-images">
<!--store owner's intagram pic for this product
shown to himself (edit elements are visible,
has class "store-owner show-edit") -->
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image store-owner show-edit">
<div class="instagram-selector">
<div class="mk-vertical-center-container" style="height: 100%">
<div class="mk-vertical-center-element">
<h2 class="edit">Adiciona imagens ao instagram com <span class="mk-hashtag">#mykubo</span> e depois clica</h2>
<!-- by clicking here pictures of other store owners disapear
and pictures of the user's instagram show in their palce with
the class "instagram-selectable" (example bellow)
pictures currently used for other produtcs (or this one) also
have the class "instagram-used" and are unselectable
(taken care of in css ;) )
-->
<div class="edit"><div class="btn btn-primary">aqui <i class="icon-instagram"></i></div></div>
<h2 class="edit">para selecionar uma imagem para este produto</h2>
<h2 class="editing">seleciona uma imagem para ficar aqui</h2>
</div>
</div>
</div>
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> You</a></div>
</div>
<!--store owner's intagram pic for this product
shown to himself (edit elements are visible,
has class "store-owner show-editing") -->
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image store-owner show-editing">
<div class="instagram-selector">
<div class="mk-vertical-center-container" style="height: 100%">
<div class="mk-vertical-center-element">
<h2 class="edit">Add pictures to instagram with <span class="mk-hashtag">#mykubo</span> and then click</h2>
<!-- by clicking here pictures of other store owners disapear
and pictures of the user's instagram show in their palce with the class "instagram-selectable".
pictures currently used for other produtcs (or this one) also have the class "instagram-used" and are unselectable (taken care of in css ;) )
-->
<div class="edit"><div class="btn btn-primary">here <i class="icon-instagram"></i></div></div>
<h2 class="edit">to select an image for this product</h2>
<h2 class="editing">seleciona uma imagem para ficar aqui</h2>
</div>
</div>
</div>
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> You</a></div>
</div>
<!--store owner's intagram pic for this product
shown to other people-->
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image store-owner">
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> [owner]</a></div>
</div>
<!--store owner's intagram pic
that can be selected for becoming
this product's picture
"instagram-selectable" -->
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image instagram-selectable">
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="instagram-selector">
<div class="mk-vertical-center-container" style="height: 100%; width:100%;">
<div class="mk-vertical-center-element">
<div><div class="btn btn-primary">selecionar <i class="icon-instagram"></i></div></div>
</div>
</div>
</div>
<div class="tagger"><a href="#"><small>by</small> Some Guy</a></div>
</div>
<!--store owner's intagram pic
that can NOT be selected for becoming
this product's picture since it is already being used
"instagram-used" -->
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image instagram-selectable instagram-used">
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> Some Guy</a></div>
</div>
<!--pictures by other store owners of the same product-->
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image">
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> Some Guy</a></div>
</div>
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image">
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> Some Guy</a></div>
</div>
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image">
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> Some Guy</a></div>
</div>
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image">
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> Some Guy</a></div>
</div>
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image">
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> Some Guy</a></div>
</div>
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image">
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> Some Guy</a></div>
</div>
<div style="background-image: url( '/static/images/dev/p.jpg' )" class="instagram-image">
<img src="/static/images/dev/p.jpg" alt="instagram image">
<div class="tagger"><a href="#"><small>by</small> Some Guy</a></div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment