Yii Framework Forum: Saimagedisplayer : How To Display Image Orderly - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Saimagedisplayer : How To Display Image Orderly Rate Topic: -----

#1 User is offline   rhigel 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 29
  • Joined: 18-April 13

Posted 20 May 2013 - 10:43 AM

i want to display gallery orderly. i use SAImageDisplayer extension, and im thingkin about integrating it with dynamicdrive css.

the dislpay gallery is a messing, so i create a css file, the content of css is the same with the dynamicdrive i gave before. but when i call using code below, the result is still a mess. Posted Image

can anyone tell me how to fix this. i welcome any pointer, or suggestion. thank you. Posted Image

screenshot.php
fyi : i already register the css in main layout file.

<div class="gallerycontainer">
    <li class="span0">
        <a href="#" class="thumbnail" rel="" data-title="Tooltip">
            <?php 
                $this->widget('SAImageDisplayer', array(
                    'image' => $data->file_name,
                    'title' => $data->description,
                    'size' => 'thumb',
                )); 
            ?>    
        </a>
        <p>
            <?php 
                $dirPictureOriginal = GalleryPhoto::getDirectoryPictureOriginal();
                $tmpUrl = Yii::app()->createUrl($dirPictureOriginal.$data->file_name);
                $url = str_replace('index.php/', '', $tmpUrl);
                echo CHtml::link('Original Size', $url);
            ?>
        </p>
    </li>    
</div>


image.css

.gallerycontainer{
    position: relative;
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
}

.thumbnail:hover{
    background-color: transparent;
}

.thumbnail:hover img{
    border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    left: 230px; /*position where enlarged image should offset horizontally */
    z-index: 50;
}


Posted Image
0

#2 User is offline   darkheir 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 66
  • Joined: 25-July 11

Posted 21 May 2013 - 03:01 AM

In the Dynamic css example you have 2 images to put:

<a class="thumbnail" href="#thumb">
    <img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" />
    <span>
        <img src="media/tree.jpg" /><br />Simply beautiful.
   </span>
</a>


So you should trye something like:
<a class="thumbnail" href="#thumb">
    <?php 
                $this->widget('SAImageDisplayer', array(
                    'image' => $data->file_name,
                    'title' => $data->description,
                    'size' => 'thumb',
                )); 
            ?>    
    <span>
        <?php 
                $this->widget('SAImageDisplayer', array(
                    'image' => $data->file_name,
                    'title' => $data->description,
                    'size' => 'original',
                )); 
            ?> 
   </span>
</a>

My blog (in french) => http://blog.devsa.org
1

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users