Beste SD'ers,

Ik heb een CMS waar ik foto's kan toevoegen. Die foto wordt aangeroepen op de index via de volgende code (deel van de code):

<img src="'.WEB_URL.''.$product['product_foto1'].'" alt="'.stripslashes($product['product_titel']).'" title="'.stripslashes($product['product_titel']).'" width="295" height="288" />

Nou wil ik graag dat als je op de foto klikt er een pop-up komt waar de foto vergroot. Kan dit en wat moet ik er dan bij zetten?

Volgens mij kan je dit mooi met Jquery doen.

http://www.no-margin-for-errors.com/.../#!prettyPhoto

Idd, probeer Lightbox eens.

maar werkt dat ook met mijn code? aangezien het niet een normale img src is of wel?

volgens mij wel, lightbox toont namelijk niet alleen IMGs maar ook andere elementen, dus het importeren van de afbeeldingen op jou manier moet kunnen, kijk anders zelf even op http://leandrovieira.com/projects/jquery/lightbox/

Best ingewikkeld nog als ik dat zo zie, maar ik heb al Jquery lightbox voor mijn slidebar gaat dat niet botsen? En kan ik die link gewoon aanpassen die ik al heb of moet ik een hele nieuwe maken?

de echt details kan ik je niet vertellen want ben geen coder, maar denk niet dat het gaat botsen als de bronnen van de bestanden anders, dan worden ze met een ander pad aangeroepen en zal het (denk ik) niet botsen.

<a href="'.WEB_URL.''.$product['product_foto1'].'" alt="'.stripslashes($product['product_titel']).'" title="'.stripslashes($product['product_titel']).'" class="lightbox"><img src="'.WEB_URL.''.$product['product_foto1'].'" alt="'.stripslashes($product['product_titel']).'" title="'.stripslashes($product['product_titel']).'" width="295" height="288" />';

Heb nu dit, hij opent hem nu gewoon in een volledig nieuw scherm op dezelfde grootte, iemand die mijn fout ziet?

Misschien de aantallen van de groottes 2x vermelden, en de 2e x het eerste aantal verdubbelen om hem te vergroten

Origineel gepost door R. Paijens

Misschien de aantallen van de groottes 2x vermelden, en de 2e x het eerste aantal verdubbelen om hem te vergroten

Ja maar hij komt ook al niet met het lightbox scherm, maar je bedoeld bij de A href de grootte vermelden en dan 2x de grootte van de laatste?

ja of hem bij a href delen door 2, zodat de afbeelding helder blijft bij het vergroten.

Origineel gepost door R. Paijens

ja of hem bij a href delen door 2, zodat de afbeelding helder blijft bij het vergroten.

Het blijft gewoon niet werken. Hij opent hem wel maar in een nieuw wit venster. Hij linkt gewoon naar de image maar zonder lightbox. er moet iets met die class fout zijn denk ik. Heb toch echt alles ook in de head gezet.

weergeeft die de titel van het product wel, heb je een link?

Origineel gepost door R. Paijens

weergeeft die de titel van het product wel, heb je een link?

Ja de titel geeft hij wel. www.justfor1day.nl en dan op de foto klikken:)

Nogmaals de code:

Code:

<a href="'.WEB_URL.''.$product['product_foto1'].'" alt="'.stripslashes($product['product_titel']).'" title="'.stripslashes($product['product_titel']).'" class="lightbox"><img src="'.WEB_URL.''.$product['product_foto1'].'" alt="'.stripslashes($product['product_titel']).'" title="'.stripslashes($product['product_titel']).'" width="295" height="288" /></a>

Aanvullend bericht:
Heb dus in de head 3 links die verwijzen naar de scripts en de volgende code:


<script type="text/javascript">
$(function() {
$('a.lightbox').lightbox({fixedNavigation:true});
});
</script>

neem anders topup, veel simpeler.

zet dit in de header:

PHP Code:

<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script> 


En gebruik dit voor de image

PHP Code:

<a href="/images/photos/1.jpg" class="top_up"><img src="/images/thumbnails/1.jpg"/></a> 


wil je andere opties gebruik dit:

PHP Code:

<script type="text/javascript">
        TopUp.addPresets({
          "#images a": {
            group: "images",
            layout: "quicklook",
            modal: 0
          },
          ".shaded": {
            shaded: 1
          }
        });
      </script> 


Verander #images, naar in welke div de image bij jouw staat of zet de div <div id=''images''> voor de foto(s)
en informatie http://gettopup.com/demo over mogelijkheden voor de opties