Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #5891

    hello,

    is it possible to make normal images behave like the images at the top of a blog post or at the portfolio?

    i tried to give them a lightbox class but that won’t work.

    they are placed as a widget in the box at the frontpage and link to another site:

    any suggestions?

    best regards

    #52098

    i found out that you have to include within the links:

    rel = “lightbox[boxes]” for the video icon

    rel = “gallery” for the image icon

    how is it possible to extend those icons. i know how to change them but i want to include a third icon for special links.

    e.g. rel =”buy” for ordering downloads

    where do i have to register this new icon?

    thanks in advance for a fast reply

    t.b.r.

    #52099

    Hey,

    to be honest it’s not easily possible because our javascript function adds the “right” icon based on the file type. I.e. jpg, png, gif, etc. files (images) get a magnifier, videos like youtube, vimeo, and all file types which are not marked as image get a “play” symbol. You can change the code/logic in js/custom.js

    #52100

    everything points into the direction that this has something to do with the custom.js and the style1.css.

    in the custom.js i insert

    $newclass = ‘lightbox_buy'; before $newclass = ‘lightbox_video';

    in the style1.css i insert

    .lightbox_buy{

    background:transparent url(../images/skin1/buy.png) no-repeat center center;

    }

    giving the image the rel=”lightbox_buy” activates the lightbox but it still shows the same icon as the video (activated by rel=”lightbox_video”).

    any advice for what is missing will be appreciated!

    #52101

    sorry my browser didn’t show your reply because of caching.

    okay, i never use gifs for images.

    so any gif can activate the buy icon.

    what do i have to change in the custom.js?

    #52102

    You can add your code after following line in custom.js:

    if(jQuery(this).attr('href').match(/(jpg|gif|jpeg|png|tif)/)) $newclass = 'lightbox_image';

    I.e. you can try to work with custom classes for “buy now items” and use the hasclass() function: http://api.jquery.com/hasClass/ to change the hover image class. The code would look like:

    if(jQuery(this).attr('href').match(/(jpg|gif|jpeg|png|tif)/)) $newclass = 'lightbox_image';
    if(jQuery(this).hasClass('buynow')) $newclass = 'lightbox_buynow';

    All “buy now” image links must have a “buynow” css class.

    #52103

    i added the if(jQuery(this).hasClass(‘buynow’)) $newclass = ‘lightbox_buynow'; behind the code.

    in my style1.css i added:

    .lightbox_buynow{

    background:transparent url(http://www.mathemitnullplan.de/wp-content/uploads/buy.png) no-repeat center center;

    }

    and even

    .buynow{

    background:transparent url(http://www.mathemitnullplan.de/wp-content/uploads/buy.png) no-repeat center center;

    }

    in the image link i add rel=”lightbox_buynow” class=”buynow” … but the icon doesn’t show up.

    the fade effekt from lightbox works but the icon is not visible yet.

    #52104

    Can you post a link to a sample entry please?

    #52105

    a target=”blank” class=”buynow” rel=”lightbox_buynow” href=”http://www.grin.com/e-book/162626/mathe-mit-nullplan/?partner_id=634859″>

    you can have a look at http://www.mathemitnullplan.de

    if you scroll down its the left picture (analysis)

    #52106

    Try to add your lightbox class to following code in style.css:

    .lightbox_video, .lightbox_image{
    position: absolute;
    z-index: 1;
    top:0;
    left:0;
    }

    like:

    .lightbox_buynow, .lightbox_video, .lightbox_image{
    position: absolute;
    z-index: 1;
    top:0;
    left:0;
    }

    That said I noticed that you’re using a pirate copy/illegal version of Display. This is quite bad in many ways because 1) this version adds malware links which point to other websites (which will affect seo) to the html code, you violate copyrights, the theme version is outdated and last but not least we won’t support it. Please upload the retail version (you can download it @themeforest.net if you bought Display) and remove the pirate copy from your server.

    #52107

    .lightbox_buynow, .lightbox_video, .lightbox_image{

    position: absolute;

    z-index: 1;

    top:0;

    left:0;

    }

    works like a charm with the little dot at the beginning.

    thanks for your advice i will replace the illigal copy with the retail one.when i was updating the homepage i took the cracked version as a test to see how it looks. when i purchased the retail copy i allready had made some customizations and simply was to lazy to install everything again. this was a clear mistake by me and i have to apologize. of course i have a license from theme forrest (otherwise i would not have any access to this awesome support forum).

    sorry for the inconvenience, your support and kriesis work is a big help.

    best regards

    thomas

    #52108

    Glad that I could help you. Please switch to retail version asap :)

    #52109

    i switched today!

    #52110

    Great – smells like new theme :)

    #52111

    one last little thing.

    it seems that the video hover play button is the standard one even for pictures.

    i want to make a popup with fancybox from an image with the magnify symbol.

    i need to give the picture the class=”fancybox” to open it with fancybox.

    can i give two different classes to one object and if so how?

    #52113

    Yes of course – just write the class attribute like:

    class="fancybox buynow athirdclass anotherclass"

    So each class separated by a blank

    #52114

    wow that is soooooooo cool!

    you are doing an awesome job dude!

    thank you!

    #52115

    Glad that I could help you :)

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘using magnify hover with normal images’ is closed to new replies.